Html chrome/safari处理方向的怪异行为：rtl_Html_Css_Google Chrome_Safari

Html chrome/safari处理方向的怪异行为：rtl

html css google-chrome safari

Html chrome/safari处理方向的怪异行为：rtl,html,css,google-chrome,safari,Html,Css,Google Chrome,Safari,在Internet Explorer中，下面的FireFox和Opera代码在右边形成一个红色浮动框，下面悬挂一个右对齐的蓝色框，正如预期的那样，但在WebKit浏览器（Chrome、Safari）中，蓝色框是左对齐的，并延伸到可见区域之外。有趣的是，如果我删除DOCTYPE标记，这些浏览器的行为通常与其他浏览器类似。这种行为背后有什么逻辑，或者只是一个bug，你能想出一个解决办法吗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//

在Internet Explorer中，下面的FireFox和Opera代码在右边形成一个红色浮动框，下面悬挂一个右对齐的蓝色框，正如预期的那样，但在WebKit浏览器（Chrome、Safari）中，蓝色框是左对齐的，并延伸到可见区域之外。有趣的是，如果我删除DOCTYPE标记，这些浏览器的行为通常与其他浏览器类似。这种行为背后有什么逻辑，或者只是一个bug，你能想出一个解决办法吗

<!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>


#顶置集装箱{
浮动：对；
}
#红色的{
背景：#f00；
颜色：#fff；
填充：10px；
}
#蓝色集装箱{
方向：rtl；
}
#蓝色的{
位置：绝对位置；
背景：#00f；
颜色：#fff；
填充：10px；
宽度：200px；
方向：ltr；
}
红色
蓝色

好的，一些观察结果：

文本方向（rtl/ltr）是不相关的。如果删除该样式，情况也是一样的

如果删除红色节点，情况只会稍有不同，蓝色框会延伸到视口右侧更远的位置

以下是我对形势的看法：

```
#top#u容器
```
仅包含一个流元素：
```
#red
```
```
#顶部容器
```
为浮动：右。因此，它位于视口的右边缘，允许包含的流元素所需的宽度（
```
#red
```
）
```
#blue
```
相对于#top_容器绝对定位，但它没有定位。因此，它在左侧边缘与红色框对齐，宽度为200px

这一切正是我所期望的。我无法解释的是为什么其他浏览器会有不同的做法。为什么它们将

#蓝色

与

#红色

的右边缘对齐？我不明白为什么会这样

无论如何，你可以通过在你的

#blue

风格中添加

right:0

来更接近你想要的东西。

嗯？右对齐？您正在使用“direction:rtl”，这是用于从右向左阅读的语言，您试图实现什么？“direction:rtl”还强制渲染器从右向左放置内容。我试图实现的是一个按钮（红色框），它在右侧浮动，带有一个悬挂的下拉列表（蓝色框），单击按钮时显示和隐藏。“…因此它在左侧边缘与红色框对齐，宽度占200px。”-它应该在右侧边缘对齐，因为父容器具有“从右到左”的特性方向，所有其他浏览器都是这样做的。“您可以通过添加正确的：0来更接近您想要的内容”-在我的实际情况中，红色框不一定在最右边，它是某种可能位于页面上任何位置的组件。请参阅我上面关于我尝试实现的内容的评论，另一个想法将不胜感激，但我真的很想知道为什么WebKit浏览器在这种情况下不像其他浏览器。W3C规范如下：。从我的理解来看，严格模式下的WebKit做得不正确，但奇怪的是，它在怪癖模式下是正确的。除了在WebKit项目中提交bug外，我不知道除了解决问题之外还有什么要做。只是提交了一份bug报告。我目前正在使用JavaScript动态地将框向左移动，并带有负的左边距，以模拟相同的效果，但效果不是很好。希望这个问题能尽快解决。