錯誤溢出元素裁剪與歌劇

Question

邊界半徑

好了，所以我做了這個FC Barcelona CSS logo，一切都在正常工作：

• 火狐13
• 鉻20
• Safari 5的
• IE 9

但在Opera 11（和12太）這些blaugrana條紋不裁剪。我嘗試了很多配置，有和沒有額外的包裝，但我無法得到它的工作。

HTML：

<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> 

相關的CSS：

#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; 
} 

我在這裏把它抄了，因爲有很多的代碼，所以也許會有所幫助。以上我跳過了用於裝飾（border_black fill_purple），z索引（layer9）和javascript機制（rounded）的類，因爲我認爲它們與問題無關。

當然，所有的東西都可以通過Firebug或其他開發工具在demo site上查看。

有什麼建議嗎？

Answer 1

我不知道爲什麼這是Opera中的bug，但你可以使用漸變（見下面的代碼）。它不適用於IE（使用版本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

有使用梯度的更清潔的方式：

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

你可以只擺脫任何內部#blaugrana_stripes_container。

以上CSS漸變與所有瀏覽器兼容can be found here。

從Lea Verou盜竊的密碼。

Answer 3

Opera 12.01修復了這個問題，但是有another bug與此主題無關​​。我知道這不是一個解決方案，但我想讓它比評論更可見。