Chrome 中的水平滚动条，方向为 RTL

Question

在 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;
}

Answer 1

我认为这是一个错误：

10.3.3 Block-level, non-replaced elements in normal flow

The following constraints must hold among the used values of the other properties:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

If 'width' is not 'auto' and 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' (plus any of 'margin-left' or 'margin-right' that are not 'auto') is larger than the width of the containing block, then any 'auto' values for 'margin-left' or 'margin-right' are, for the following rules, treated as zero.

If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.

If there is exactly one value specified as 'auto', its used value follows from the equality.

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

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

所以应该发生的是：

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

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

如果我们也将 direction 更改为 ltr 和 margin-left:auto 或 margin-right:auto 它不会发生，所以看起来问题只在方向为 rtl 时发生.

Answer 2

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

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

overflow:hidden;

并且最好使用带有 html 标记的方向，例如

而不是 CSS 声明。

Answer 3

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

Chrome 中的水平滚动条，方向为 RTL

Horizontal scrollbar in Chrome with direction RTL

css

google-chrome

right-to-left