Question

以下HTML在Firefox 2＆amp; 3和IE7。 Left按钮位于左侧，Right按钮位于右侧，中间的文字位于中间位置！

然而，在IE6上，Left按钮未对齐 - 它显示为居中对齐。

有谁能提出为什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Layout problem!</title>
    <style type="text/css">
        DIV#Footer
        {
            padding: 10px;
            color: #fff;
            background-color: #484848;
            position: relative;
            text-align: center;
        }
        DIV#Footer INPUT
        {
            margin: 5px 15px;
            position: absolute;
            top: 0px;
        }
        DIV#Footer INPUT.right
        {
            right: 0px;
        }
        DIV#Footer INPUT.left
        {
            left: 0px;
        }
    </style>
</head>
<body>
    <div id="Footer">
        <input class="left" type="button" value="Left" />
        Some text in the middle
        <input class="right" type="button" value="Right" />
    </div>
</body>
</html>

（我一直在使用IE Developer工具来尝试分析并解决这个问题，但无济于事......）

Answer 1

您必须触发hasLayout的{{1}}属性（IE事物...）。宽度和高度触发它，如果你不想设置宽度或高度，你可以在CSS中使用仅IE的#footer属性。

zoom

IIRC，在IE中，元素有两种不同的布局行为，一种是

<!DOCTYPE html>
<html>
<head>
    <title>Layout problem!</title>
    <style type="text/css">
        div#footer
        {
            padding: 10px;
            color: #fff;
            background-color: #484848;
            position: relative;
            text-align: center;
            zoom: 1;
        }
        div#footer input
        {
            margin: 5px 15px;
            position: absolute;
            top: 0;
        }
        div#footer input.right
        {
            right: 0;
        }
        div#footer input.left
        {
            left: 0;
        }
    </style>
</head>
<body>
    <div id="footer">
        <input class="left" type="button" value="Left">
        Some text in the middle
        <input class="right" type="button" value="Right">
    </div>
</body>
</html>

是hasLayout，另一种是true。确保将其设置为false可以解决许多奇怪的布局问题，例如此问题。

Answer 2

试试这个（原谅内联样式！）

<div id="Footer">
    <div style="width:100%">
    <input class="left" type="button" value="Left" />
    Some text in the middle
    <input class="right" type="button" value="Right" />
    </div>
  </div>

Answer 3

乔纳斯说。

每当有疑问时，我建议明确指定宽度，即使不是必需的，我更喜欢使用“zoom”，因为缩放不是为解决布局问题而设计的。然而，并不总是可以明确地设置宽度，因此“缩放”可以解决问题。

Answer 4

在正常对齐的文本之前，您的浮动/定位元素应该先按顺序排列。不要按照它们出现的顺序定位它们。

此外，您可能需要添加！important来增加优先级，并使用Microsoft的IE Developer工具栏查看哪些规则正在生效。父元素的宽度是多少？

它看起来应该只是工作。

Answer 5

我打算给你一些机会，看看你有没有运气：

<style type="text/css">
    DIV#Footer
    {
        padding: 10px;
        color: #fff;
        background-color: #484848;
        position: relative;
        text-align: center;
    }
    DIV#Footer INPUT
    {
        margin: 5px 15px;
        position: absolute;
        top: 0px;
    }
    DIV#Footer INPUT.right
    {
        float: right;
    }
    DIV#Footer INPUT.left
    {
        float: left;
    }
    #Footer .center {
        float: left;
    }

</style>

然后在HTML

中

<div id="Footer">
    <input class="right" type="button" value="Right" />
    <input class="left" type="button" value="Left" />
    <div class="center">Some text in the middle</div>
</div>

然后你必须通过并给他们一些余量来排列他们想要的方式。这不适用于流体布局，除非您为这些项目提供页脚或页脚内的容器固定宽度。

Answer 6

我发现在ie6中处理绝对定位的div标签的另一个选项是在CSS中添加左右两个值。

如果您知道正在使用的div的宽度，那么这是简单的数学运算。

似乎“装订”div盒。

我已经尝试过我读过的所有其他建议（包括javascript强制ie6表现得像ie7或ie8）但是它们没有用。

上面的解决方案确实如此。

祝你好运！

IE6布局问题 - 绝对定位

6 个答案: