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

Question

在 Chrome 上，即使没有边距也没有内容。

有关示例，请参阅 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 标签上设置方向:ltr，将页面的全部内容包裹在一个 div 中并将其方向设置为 rtl。