在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;
}
最佳答案
我相信这是一个错误：
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”。
如果恰好有一个值指定为“自动”，则其使用的值
从平等出发。
如果将“宽度”设置为“自动”，则其他任何“自动”值将变为“ 0”，并且
“宽度”源自所产生的相等性。
如果'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
所以应该发生的是：
如果将“宽度”设置为“自动”，则其他任何“自动”值将变为“ 0”，并且
“宽度”源自所产生的相等性。
.inner宽度应与其父宽度相同，因此不应出现水平滚动条。如果我们也将
direction更改为ltr和margin-left:auto或margin-right:auto，则不会发生，因此看起来问题仅在方向为rtl时发生。