Chrome中带有RTL方向的水平滚动条

Question

Chrome中带有RTL方向的水平滚动条

cssgoogle-chromeright-to-left

3

在Chrome浏览器中，当页面使用rtl方向和margin-right: auto以及overflow: auto时，即使没有边距和内容，也会出现水平滚动条。

例如，请参见https://jsfiddle.net/ht3drjae/2/。我原本期望看到内部和外部具有相同的宽度，因此不应该出现绿色背景色和水平滚动条。

这个滚动条只在Chrome浏览器中出现，而在Firefox或IE中却没有。那么为什么会出现滚动条？这是浏览器的一个错误吗？

HTML：

<div class="outer">
    <div class="inner"></div>
</div>

CSS:

body {
    direction: rtl;
}
.outer {
    height: 500px;
    overflow: auto;
    background: green;
}
.inner {
    height: 1000px;
    margin-right: auto;
    background: red;
}

- Mythica

我认为这是因为左侧的滚动条导致了额外的宽度。这可能会有所帮助：https://dev59.com/62Ml5IYBdhLWcg3wP1HE - deebs

滚动条不会增加元素的宽度，它们的宽度是从元素内容宽度中减去的。"滚动条占用的任何空间都应该从具有滚动条的元素形成的包含块的尺寸中扣除（减去）"。http://www.w3.org/TR/CSS21/visufx.html#overflow - Luizgrs

3个回答

3

我相信这是一个错误：

10.3.3 块级非替换元素处于正常流中

其他属性的使用值之间必须遵守以下约束：

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含块的宽度

如果'width'不是'auto'且'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width'（加上任何不是'auto'的'margin-left'或'margin-right'）大于包含块的宽度，则对于以下规则，任何'margin-left'或'margin-right'的'auto'值将被视为零。

如果上述所有属性都具有计算值而非'auto'，则这些值被称为“过度约束”，其中一个使用值必须与其计算值不同。如果包含块的'direction'属性的值为'ltr'，则忽略'margin-right'的指定值，并计算该值使等式成立。如果'direction'的值为'rtl'，则此情况发生在'margin-left'上。

如果只有一个值被指定为'auto'，则其使用值遵循等式。

如果'width'设置为'auto'，则任何其他'auto'值都变为'0'，并且'width'遵循由此产生的等式。

如果'margin-left'和'margin-right'都是'auto'，则它们的使用值相等。这使元素在包含块的边缘上水平居中。

http://www.w3.org/TR/CSS2/visudet.html#blockwidth

对于您的例子，.inner 的计算值为：

margin-left: 0 (initial value)
border-left-width: 0 (because boder-style initial value is none)
padding-left: 0 (initial value)
width: auto (initial value)
padding-right: 0 (initial value)
border-right-width: 0 (because boder-style initial value is none)
margin-right: auto

所以应该发生的是：

如果 "width" 设置为 "auto"，任何其他 "auto" 值都变成 "0"，并且 "width" 遵循结果相等。

.inner 的宽度应与其父元素相同，因此不应出现水平滚动条。

如果我们还将 "direction" 更改为 "ltr" 并使用 "margin-left:auto" 或 "margin-right:auto"，则不会发生这种情况，因此看起来问题仅在方向为 rtl 时发生。

- Luizgrs

我认为你是对的，这是Chrome的一个bug。我会提交一个bug报告，看看他们是否想要修复它。谢谢你的回答。 - Mythica

0

我希望下面的代码可以解决这个问题：

.outer {
    height: 500px;
    overflow: hidden;/changed to hidden/
    background: green;
}

overflow:hidden;

最好始终使用HTML标记来指定方向，而不是使用CSS声明。

- Nandu Hulsure

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sohrab Taee · Accepted Answer

您需要在body标签上设置direction: ltr，将页面的整个内容包裹在一个div中，并将其方向设置为rtl。