Question

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

Answer 1

好的，一些意见：

文本方向（rtl / ltr）无关紧要。如果删除该样式，情况就是一样。

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

以下是我阅读情况的方法：

#top_container只包含一个流元素：#red
#top_container是浮动的：对。因此，它位于视口的右边缘，允许包含的流元素（#red）所需的宽度。
#blue绝对定位，但它没有定位。因此，它在左边缘与红色框对齐，宽度为200px。

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

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

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

1 个答案: