好的,我制作了这个FC Barcelona CSS标志并且在以下浏览器中一切正常:
- Firefox 13
- Chrome 20
- Safari 5
- IE 9
但是在Opera 11(和12)中,那些蓝红条纹没有被裁剪。我尝试过许多配置,使用或不使用额外的包装器,但无法使其工作。
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 机制 (rounded
),因为我认为它们与问题无关。
当然,通过 Firebug 或其他开发者工具在演示网站上可以查看所有内容。
有什么建议吗?