chrome/safari 处理方向的奇怪行为：rtl答案

【问题标题】：Weird behavior of chrome/safari dealing with direction:rtlchrome/safari 处理方向的奇怪行为：rtl
【发布时间】：2010-11-16 13:09:35
【问题描述】：

在 Internet Explorer 中，下面的 FireFox 和 Opera 代码在右侧创建一个红色浮动框，并在其下方悬挂一个右对齐的蓝色框，但在 WebKit 浏览器（Chrome、Safari）中，蓝色框是左对齐并扩展超出可见区域。有趣的是，如果我删除 DOCTYPE 标记，这些浏览器会像其他浏览器一样正常运行。这种行为背后有什么逻辑还是只是一个错误，你能想出一个解决方法吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <style>
            #top_container {
                float:right;
            }
            #red {
                background:#f00;
                color:#fff;
                padding:10px;
            }
            #blue_container {
                direction:rtl;
            }

            #blue {
                position:absolute;
                background:#00f;
                color:#fff;
                padding:10px;
                width:200px;
                direction:ltr;
            }
        </style>
    </head>
    <body>
        <div id="top_container">
            <div id="red">
                red
            </div>
            <div id="blue_container">
                <div id="blue">
                    blue
                </div>
            </div>
        </div>
    </body>
</html>

【问题讨论】：

嗯？右对齐？您正在使用“direction: rtl”，这是针对从右到左阅读的语言，您要实现什么目标？
"direction:rtl" 还强制渲染器从右到左放置东西。我想要实现的是一个按钮（红色框），它浮动在右侧，带有一个悬挂的下拉列表（蓝色框），单击按钮时会显示和隐藏。

标签： html css google-chrome safari

【解决方案1】：

好的，有几点意见：

文本方向（rtl/ltr）无关紧要。如果你去掉那个样式，情况是一样的。

如果移除红色节点，情况只会略有不同，蓝色框会从视口向右延伸得更远。

我是这样解读情况的：

#top_container 仅包含一个流程元素：#red
#top_container 是浮点数：对。因此，它位于视口的右边缘，允许包含的流元素 (#red) 所需的宽度。
#blue 相对于#top_container 是绝对定位的，但它没有定位。因此，它在左边缘与红色框对齐并占据 200 像素的宽度。

这一切正是我所期望的。我无法解释的是为什么其他浏览器的做法不同。为什么它们将#blue 与#red 的右边缘对齐？我不明白为什么会这样。

无论如何，您可以通过将right:0 添加到您的#blue 样式中来更接近您想要的。

【讨论】：

"...因此它的左边缘与红色框对齐，宽度为 200px。" - 它应该在右边缘对齐，因为父容器具有“从右到左”的方向，所有其他浏览器都这样做。 “你可以通过添加 right:0 来更接近你想要的” - 在我的真实情况下，红色框不一定在最右边，它是某种组件，可能位于页面上的任何位置。
请参阅上面关于我正在努力实现的目标的评论，我们将不胜感激另一种想法，但我真的很想知道为什么 WebKit 浏览器在这种情况下不像其他浏览器那样工作。
W3C 规范在这里：w3.org/TR/CSS21/visuren.html#block-boxes。从我的阅读方式来看，严格模式下的 WebKit 做错了，但奇怪的是它在怪癖模式下是正确的。
除了提交 WebKit 项目的 bug 之外，我不知道除了解决这个问题还有什么可做的。
刚刚提交了一个错误报告。我目前正在使用 JavaScript 以负的左边距动态地将框向左移动，以模拟不是很优雅的相同效果。希望这个问题很快得到解决。