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正常流程中的块级非替换元素

以下约束必须包含在另一个的使用值中   属性：

＆＃39;利润率左＆＃39; +＆＃39; border-left-width＆＃39; +＆＃39; padding-left＆＃39; +＆＃39;宽度＆＃39; +   ＆＃39;填充右＆＃39; +＆＃39; border-right-width＆＃39; +＆＃39; margin-right＆＃39; =宽度   包含块

如果＆＃39;宽度＆＃39;不是＆＃39; auto＆＃39;和＆＃39; border-left-width＆＃39; +＆＃39; padding-left＆＃39; +   ＆＃39;宽度＆＃39; +＆＃39; padding-right＆＃39; +＆＃39; border-right-width＆＃39; （加上任何一个   ＆＃39;利润率左＆＃39;或者＆＃39; margin-right＆＃39;不是＆＃39; auto＆＃39;）大于   包含块的宽度，然后是任何＆＃39; auto＆＃39;价值观   ＆＃39;利润率左＆＃39;或者＆＃39; margin-right＆＃39;按照以下规则进行处理   为零。

如果以上所有都具有＆＃39; auto＆＃39;以外的计算值，则   据说价值过度约束＆＃34;和其中一个使用的值   必须与其计算值不同。如果＆＃39;方向＆＃39;   包含块的属性具有值＆＃39; ltr＆＃39;，指定的   ＆＃39; margin-right＆＃39;的价值被忽略，值计算如此   使平等成真。如果＆＃39;方向的价值＆＃39;是的，这是＃rtl＆＃39;   恰好是边缘左边的＆＃39;代替。

如果只有一个值指定为＆＃39; auto＆＃39;，则使用其值   从平等出发。

如果＆＃39;宽度＆＃39;设置为＆＃39; auto＆＃39;，任何其他＆＃39; auto＆＃39;价值观成为＆＃39; 0＆＃39;和   ＆＃39;宽度＆＃39;从产生的平等开始。

如果两个边缘都离开了＆＃39;和＆＃39; margin-right＆＃39;是＆＃39; auto＆＃39;，它们的使用价值   是平等的。这使元素相对于中心水平居中   包含块的边缘。

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

那么应该发生的是：

如果＆＃39;宽度＆＃39;设置为＆＃39; auto＆＃39;，任何其他＆＃39; auto＆＃39;价值观成为＆＃39; 0＆＃39;和＆＃39;宽度＆＃39;从产生的平等开始。

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

如果我们还将direction更改为ltr和margin-left:auto或margin-right:auto，则不会发生这种情况，因此只有当方向为rtl时才会出现问题。< / p>

Answer 2

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

Answer 3

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

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

overflow:hidden;

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

而不是CSS声明。

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

3 个答案: