好的,所以我做了这个
FC Barcelona CSS logo,一切都正常工作：
> Firefox 13
> Chrome 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-indexing(layer9)和javascript机制(四舍五入),因为我认为它们与问题无关.
当然,一切都可以通过Firebug或其他开发者工具在demo site上查看.
有什么建议么？
解决方法
我不知道为什么这是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%,#980f39),color-stop(28%,color-stop(42%,color-stop(57%,color-stop(71%,color-stop(86%,color-stop(99%,#0b2f89));
background: -webkit-linear-gradient(left,#0b2f89 99%);
background: -o-linear-gradient(left,#0b2f89 99%);
background: -ms-linear-gradient(left,#0b2f89 99%);
background: linear-gradient(to right,#0b2f89 99%);
}
