为什么Chrome和Safari for Ipad 2搞砸了我的CSS三角形？

Question

我正在尝试使用CSS而不是图像来创建横幅效果。结果应该是这样的：

此示例是使用this jsfiddle中的html和CSS创建的。这是横幅的CSS（.widget-title）：

.widget-title
{
    background-color: #B1DDC9;
    color: white;
    height: 24px;
    text-align: center;
}

.widget-title:before
{
    content: "";
    float:left;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 12px 0px 12px 12px;
    border-color: #B1DDC9 #B1DDC9 #B1DDC9 white;
}

.widget-title:after
{
    content: "";
    float:right;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 12px 12px 12px 0px;
    border-color: #B1DDC9 white #B1DDC9 white;
}

这似乎在我在桌面和手机上测试的所有浏览器上都能正常工作。然而，我的Ipad2上的Safari和Chrome都会在横幅的左右外边缘呈现一条细线：

造成这种现象的原因是什么？有什么办法可以解决吗？

Answer 1

这看起来是在三角形边缘渗透的背景颜色，可能是由于某种子像素渲染怪癖。从CSS开始，这不应该发生，因为三角形应该与标题的边缘对接，但那是你的CSS;）

不确定它是否适合您，但您可以尝试将position:relative放在标题上，position:absolute放在两个三角形上，并使用相关的left:0和{{1}定位你想要的位置。根据我的经验，这通常比你的元素最终的浮动更可靠。

作为旁注，您可以使用right:0表示您不想显示的三个边。这也可以让你将三角形变大一个像素，并将左/右重叠一个像素（即border-color:transparent）。这绝对应该解决你的问题。

Answer 2

尝试更改border-width: 12px 0px 12px 12px; 到border-width: 12px 2px 12px 12px;

也许这会将三角形的“背面”延伸到横幅之外并摆脱线