Chrome中的HTML标签分词

Question

将Google Chrome更新为最新版本后，我的HTML文档中的所有标签都会出现不需要的分页符。看看这个小提琴：http://jsfiddle.net/hc9avcd3/

它应该是这样的（从旧版本的chrome屏幕截图）：

虽然灰色div有width: 100%且标签有width: auto，但这就是它在chrome上的外观（从新版Chrome浏览器中截屏）：

• ltr和英文标签没有问题。

• 表和<p>元素也存在此问题。

我该如何解决问题？每次打开文档时，我都会收到ERR_CACHE_MISS错误。

我没有启用扩展程序或加载项。

Answer 1

这似乎是Chrome中布局算法中的浮动元素中从右到左文本的错误。这并不取决于direction设置;如果您删除direction: rtl，则文字仍会包含在Chrome中。阿拉伯字母的固有方向性仍然导致从右到左的布局，这使得Chrome将文本划分为两行，即使它恰好适合一行。

问题可以简化为只有p元素浮动的简单案例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

要规避错误，请不要使用浮动。在给定的情况下，将div元素的内容设置为右对齐可能就足够了：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

奇怪。不确定为什么使用最新版本的Chrome对非英文字符执行此操作，但设置width: inherit;可以解决问题。