css - Chrome 中的 HTML 标签断字

Question

将 Google Chrome 更新到最新版本后，我的 HTML 文档中的所有标签都有不需要的分词符。看看这个 fiddle :http://jsfiddle.net/hc9avcd3/

它应该是这样的(旧版 chrome 的屏幕截图):

虽然灰色的div有width: 100%标签上有 width: auto , 但这是它在 chrome 上的样子(新版 Chrome 的屏幕截图):

• ltr 没问题和英文标签。

• 表格和 <p>元素也有这个问题。

我该如何解决这个问题？我也得到 ERR_CACHE_MISS每次打开文档时都会出错。

而且我没有启用任何扩展或附加组件。

Answer 1

这似乎是 Chrome 中 float 元素中从右到左文本的布局算法中的一个错误。这不依赖于 direction 设置；如果您删除 direction: rtl，文本仍会在 Chrome 中换行。阿拉伯字母固有的方向性仍然会导致从右到左的布局，这会以某种方式让 Chrome 将文本分成两行，即使它可以很好地适合一行。

这个问题可以简化为只有一个 p 元素 float 的简单情况:

body {
    font-size: 14px;
    font-family: Tahoma, Geneva, sans-serif;
}
p {
    float: right;
}

<p>
    سلام سلام سلام سلام سلام سلام سلام
</p>

在其他浏览器中，文本显示在一行中。在 Chrome 中，它会被拆分。奇怪的是，这取决于字体大小。如果将其更改为 15px，则文本不会拆分。

为了避免这个错误，不要使用 float 。在给定的情况下，将 div 元素的内容设置为右对齐可能就足够了:

body {
    margin: 0px;
    font-size: 14px;
    font-family: Tahoma, Geneva, sans-serif;
}
div {
    padding: 5px;
    text-align: right;
    background-color: #E7E7E7;
}

<div>
    <label>سلام سلام سلام سلام سلام سلام سلام</label>
</div>