css - 为什么 Ipad 2 的 Chrome 和 Safari 弄乱了我的 CSS 三 Angular 形？

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

这看起来像是三 Angular 形边缘渗出的背景颜色，可能是由于某种亚像素渲染怪癖。从您的 CSS 来看，这不应该发生，因为三 Angular 形应该紧靠标题的边缘，但那是适合您的 CSS ;)

不确定它是否适合您，但您可以尝试将 position:relative 放在标题上，将 position:absolute 放在两个三 Angular 形上，以及相关的left:0 和 right:0 来定位你想要的位置。根据我的经验，就元素的最终位置而言，这通常比 float 更可靠。

作为旁注，您可以对不想显示的三个边使用 border-color:transparent。这还允许您使三 Angular 形变大一个像素，并在左侧/右侧重叠一个像素(即 left:-1px)。那绝对可以解决您的问题。