Opera浏览器中带有边框半径的元素发生了错误的溢出裁剪。

Question

好的，我制作了这个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 或其他开发者工具在演示网站上可以查看所有内容。

有什么建议吗？

- Wirone

---

1. 未加前缀的属性应该放在前缀之后，而不是之前。
2. “-o-border-radius”不存在。

- BoltClock

好的，我已经纠正了它（在演示站点和这里），但这只是外观上的改变，在这种情况下没有任何作用。 - Wirone

就算没什么好的绘图方式，FWIW也不是一个很好的选择。在所有浏览器中，缩放时所有接缝都会变得明显。我建议使用SVG来代替。无论如何，这已经被报告为: https://bugs.opera.com/browse/CORE-35453。 - Erik Dahlström

我没有Opera的bugtracker账户，所以无法查看此问题。但是多亏了你，现在我知道Opera使用JIRA ;) ps.整个标志的事情不是为了使用，只是为了好玩，所以我甚至没有考虑缩放等问题。 - Wirone

Answer 1

我不知道为什么这在Opera浏览器上有问题，但您可以使用渐变（参见下面的代码）。它在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%);

}

- pmaruszczyk

---

这是一个聪明的解决方案，但如果它在IE上不起作用，改变显示条纹的方式就没有意义了。现在每个浏览器都显示标志，只有Opera不会裁剪底部，但我认为这比在IE上没有条纹要好:) 无论如何，谢谢！ - Wirone

但是你可以使用简单的条件语句 `<!--[if IE 9]><style ..> ... </style> <![endif]-->` 来混合使用两者，而且成本低廉，一切都会没问题的 :) - pmaruszczyk

Answer 2

有一种更简洁的使用渐变的方法：

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

您可以直接删除#blaugrana_stripes_container内的任何内容。

上述CSS渐变与所有浏览器兼容的版本可以在此处找到：链接。

代码来源于Lea Verou。

- approxiblue

---

+1 给 Colorzilla，但我不确定我想在这里使用渐变。重复渐变确实更清晰，但是 Opera 会用水平线来渲染它（即使我使用 background-size: 70px 244px; 而不是你写的 50px）。裁剪可以解决问题，但我现在正在度假，稍后再考虑它 ;) - Wirone

裁剪应该可以工作。我一直在试图弄清楚为什么它不起作用，但是Opera的开发工具并不是很流畅。Firebug让我感到失望。 - approxiblue

Answer 3

Opera 12.01修复了这个问题，但是有另一个与此主题无关的错误。我知道这不是一个解决方案，但我想让它比评论更加显眼。

- Wirone