索尼 Xperia Tablet Z 上的 CSS 伪元素渲染问题答案

【问题标题】：CSS Psuedo elements rendering issue on Sony Xperia Tablet Z索尼 Xperia Tablet Z 上的 CSS 伪元素渲染问题
【发布时间】：2014-10-01 06:13:15
【问题描述】：

我正在为客户开发一个网站，但遇到了伪元素（::before 和 ::after）呈现有趣的白线的问题。我只有在这台平板电脑上才有这个问题，墨菲定律就是我的客户正在测试的。

这是一个如何呈现的示例：

HTML：

<li>
  <div class="arrow_box" id="step2">STEP 2</div>
</li>
<li>
  <div class="arrow_box" id="step3">STEP 3</div>
</li>

这是我正在使用的 CSS：

.active .arrow_box {
    background-color: #ff3838;
}

.active .arrow_box:after {
    border-left-color: #ff3838;
}

.arrow_box:after, .arrow_box:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(0, 0, 0, 0);
    border-left-color: #000;
    border-width: 30px;
    margin-top: -30px;
}

.active .arrow_box:after {
    border-left-color: #ff3838;
}

.arrow_box:before {
    border-color: rgba(255, 255, 255, 0);
    border-left-color: #fff;
    border-width: 36px;
    margin-top: -36px;
}

【问题讨论】：

您的内容是否以任何方式缩放？如果视口缩放到非整数缩放，我曾经遇到过即使桌面浏览器也会呈现间隙的情况。另外——更多的 CSS 在这里会有所帮助——或者甚至更好，一个包含渲染元素所需的所有 CSS 的小提琴——否则我无法测试任何东西。
我发现有些浏览器无法处理这种面包屑菜单技术。我担心这个错误只会有一个随机的解决方法。您是否尝试将整个 <ul> 设为黑色背景？

标签： android html css cordova

【解决方案1】：

问题来自元素宽度中的十进制像素值。这很难用百分比来避免，所以我将其转换为整个像素值，从而解决了这个问题。

感谢所有贡献者的帮助。

【讨论】：

【解决方案2】：

我遇到了同样的问题，必须为每个 <li> 保留一个百分比宽度。在台式机上看起来很棒，但同样的线条出现在平板电脑上。我知道这是一篇旧帖子，但这是我的解决方法，以防将来有人需要它。使用您提供的代码，更改将是：

.arrow_box:after,
.arrow_box:before {left: 99%;}
li {margin: 0 1px;}

【讨论】：