tràn Wrong cắt xén trong phần tử với border-radius trên Opera

Question

Ok, vì vậy tôi đã thực hiện FC Barcelona CSS logo này và tất cả mọi thứ hoạt động tốt dưới:

• Firefox 13
• Chrome 20
• Safari 5
• IE 9

NHƯNG trên Opera 11 (và 12 quá) các sọc blaugrana không bị cắt. Tôi đã thử nhiều cấu hình, có và không có trình bao bọc bổ sung, nhưng tôi không thể làm cho nó hoạt động được.

HTML: CSS

<div id="blaugrana_stripes_container" class="abs border_black fill_purple cropper layer9 rounded"> 
    <!-- Wrapper needed for some browsers to crop overflow properly --> 
    <div id="blaugrana_stripes_overflow_cropper" class="rounded"> 
     <div class="blaugrana_stripes fill_purple border_blue"></div> 
     <div class="blaugrana_stripes fill_purple border_blue"></div> 
    </div> 
</div> 

liên quan:

#blaugrana_stripes_container, #blaugrana_stripes_overflow_cropper { 
    width: 244px; 
    height: 244px; 
    text-align: left; 
    -moz-border-radius: 155px 155px 134px 134px; 
    -webkit-border-radius: 155px 155px 134px 134px; 
    border-radius: 155px 155px 134px 134px; 
} 
#blaugrana_stripes_container { 
    left: 36px; 
    top: 62px; 
    border-width: 2px; 
    -ms-transform: scaleY(0.79); 
    -moz-transform: scaleY(0.79); 
    -webkit-transform: scaleY(0.79); 
    -o-transform: scaleY(0.79); 
    transform: scaleY(0.79); 
    z-index: 3; 
} 
#blaugrana_stripes_overflow_cropper { 
    overflow: hidden; 
    white-space: nowrap; 
} 
.blaugrana_stripes { 
    height: 100%; 
    width: 35px; 
    border-width: 0px 35px 0px 35px; 
    margin-right: 35px; 
    display: inline-block; 
} 
.cropper { 
    overflow: hidden; 
    font-size: 0; 
    margin: 0px; 
    padding: 0px; 
    border: none; 
} 
.abs { 
    position: absolute; 
} 

tôi đã sao chép nó ở đây bởi vì có rất nhiều mã, do đó có thể nó sẽ giúp. Ở trên, tôi đã bỏ qua các lớp được sử dụng để trang trí (border_black fill_purple), z-indexing (layer9) và các cơ chế javascript (rounded) bởi vì tôi nghĩ rằng chúng không liên quan đến vấn đề.

Tất nhiên mọi thứ đều có thể xem được qua Firebug hoặc các công cụ phát triển khác trên demo site.

Mọi đề xuất?

Answer 1

Tôi không biết tại sao đây là lỗi trong Opera, nhưng bạn có thể sử dụng gradient (xem mã bên dưới). Nó không hoạt động trong IE (được thử nghiệm với phiên bản 9).

.blaugrana_stripes{display:none;} 
#blaugrana_stripes_overflow_cropper{ 

background: #0b2f89; 
background: -moz-linear-gradient(left, #0b2f89 0%, #0b2f89 14%, #980f39 14%, #980f39 28%, #0b2f89 28%, #0b2f89 42%, #980f39 42%, #980f39 57%, #0b2f89 57%, #0b2f89 71%, #980f39 71%, #980f39 86%, #0b2f89 86%, #0b2f89 99%); 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0b2f89), color-stop(14%,#0b2f89), color-stop(14%,#980f39), color-stop(28%,#980f39), color-stop(28%,#0b2f89), color-stop(42%,#0b2f89), color-stop(42%,#980f39), color-stop(57%,#980f39), color-stop(57%,#0b2f89), color-stop(71%,#0b2f89), color-stop(71%,#980f39), color-stop(86%,#980f39), color-stop(86%,#0b2f89), color-stop(99%,#0b2f89)); 
background: -webkit-linear-gradient(left, #0b2f89 0%,#0b2f89 14%,#980f39 14%,#980f39 28%,#0b2f89 28%,#0b2f89 42%,#980f39 42%,#980f39 57%,#0b2f89 57%,#0b2f89 71%,#980f39 71%,#980f39 86%,#0b2f89 86%,#0b2f89 99%); 
background: -o-linear-gradient(left, #0b2f89 0%,#0b2f89 14%,#980f39 14%,#980f39 28%,#0b2f89 28%,#0b2f89 42%,#980f39 42%,#980f39 57%,#0b2f89 57%,#0b2f89 71%,#980f39 71%,#980f39 86%,#0b2f89 86%,#0b2f89 99%); 
background: -ms-linear-gradient(left, #0b2f89 0%,#0b2f89 14%,#980f39 14%,#980f39 28%,#0b2f89 28%,#0b2f89 42%,#980f39 42%,#980f39 57%,#0b2f89 57%,#0b2f89 71%,#980f39 71%,#980f39 86%,#0b2f89 86%,#0b2f89 99%); 
background: linear-gradient(to right, #0b2f89 0%,#0b2f89 14%,#980f39 14%,#980f39 28%,#0b2f89 28%,#0b2f89 42%,#980f39 42%,#980f39 57%,#0b2f89 57%,#0b2f89 71%,#980f39 71%,#980f39 86%,#0b2f89 86%,#0b2f89 99%); 

} 

Answer 2

Có một cách thậm chí sạch hơn của việc sử dụng gradient:

#blaugrana_stripes_container { 
    background-image: -o-linear-gradient(0deg, #0B2E89 50%, #980F39 50%, #980F39); 
    background-size: 70px 50px; 
} 

Bạn chỉ có thể thoát khỏi bất cứ điều gì bên trong #blaugrana_stripes_container.

Gradient CSS ở trên tương thích với tất cả các trình duyệt can be found here.

Mã bị lấy cắp từ Lea Verou.

Answer 3

Opera 12.01 khắc phục vấn đề này, tuy nhiên có another bug không liên quan đến chủ đề này. Tôi biết đây không phải là giải pháp, nhưng tôi muốn làm cho nó dễ nhìn hơn bình luận.