Итак, я сделал этот логотип FC Barcelona CSS, и все работает отлично:
- 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-механизмы (rounded
), потому что я думаю, что они не связаны с проблемой.
Конечно, все можно просмотреть через Firebug или другие инструменты разработчика на демонстрационном сайте .
Любые предложения?