IE6布局问题——绝对定位答案

【问题标题】：IE6 layout issue - absolute positioningIE6布局问题——绝对定位
【发布时间】：2010-10-06 23:14:27
【问题描述】：

以下 HTML 在 Firefox 2 & 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 工具尝试分析和修复此问题，但无济于事...）

【问题讨论】：

标签： html css web internet-explorer-6

【解决方案1】：

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

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

IIRC，在 IE 中，元素有两种不同的布局行为，一种是 hasLayout 是 true，另一种是 false。确保将其设置为 true 可以解决很多像这样的奇怪布局问题。

【讨论】：

这很反常！谢谢乔纳斯。这几乎是完美的——它似乎在 IE6 中将我包含的 div 的宽度推了几个像素。
设置缩放会改变光标。可能只想通过在规则前添加 _ 来将其限制为 IE6。
我没有看到任何光标更改问题 Bjorn

【解决方案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>

【讨论】：

非常好 - 感谢 AJM！但是，在 IE6 中，Left 按钮的左侧和 Footer 的边缘之间现在有 20px 的间隙...

【解决方案3】：

正如乔纳斯所说。

如有疑问，我建议明确指定宽度，即使不需要，我更喜欢使用它而不是“缩放”，因为缩放不是为了解决布局问题而设计的。然而，显式设置宽度并不总是可行的，所以“缩放”就可以了。

【讨论】：

【解决方案4】：

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

您可能还想添加一个 !important 以增加优先级并使用 Microsoft 的 IE Developer 工具栏查看哪些规则正在生效。父元素的宽度是多少？

它看起来确实应该可以工作。

【讨论】：

谢谢，但这似乎并没有改变。这也会给使用屏幕阅读器的用户带来麻烦。

【解决方案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>

然后，您将不得不通过并给他们一些边距，以便按照您想要的方式排列它们。这不适用于流畅的布局，除非您为这些项目的页脚或页脚内的容器提供固定宽度。

【讨论】：

【解决方案6】：

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

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

似乎将 div 框“装订”到位。

我已经尝试了我读过的所有其他建议（包括强制 ie6 像 ie7 或 ie8 一样运行的 javascript），但它们没有奏效。

上面的解决方案做到了。

祝你好运！

【讨论】：