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

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

Answer 2

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

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

overflow:hidden;

并且总是更好地使用带有 html 标记的方向，例如

而不是 CSS 声明。

Answer 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”，则 值被称为“过度约束”并且使用的值之一 必须与其计算值不同。如果“方向” 包含块的属性具有值“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 时才会出现。