4

以下 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 工具尝试分析和修复这个问题，但无济于事......）

4

6 回答 6

13

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

<!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 中，元素有两种不同的布局行为，一种 if hasLayoutis true，另一种 if it's false。确保将其设置为true可以解决许多像这样的奇怪布局问题。

于 2009-02-11T17:24:35.093 回答
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>
于 2009-02-11T17:14:36.117 回答
2

正如乔纳斯所说。

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

于 2009-02-12T23:19:51.547 回答
0

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

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

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

于 2009-02-11T17:13:00.910 回答
0

我将为您的方法提供一些机会，看看您是否对此有任何运气：

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

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

于 2009-02-12T01:26:53.140 回答
0

我发现在 ie6 中处理绝对定位的 div 标签对我有用的另一个选项是在 CSS 中添加 left 和 right 值。

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

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

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

上面的解决方案做到了。

祝你好运！

于 2010-02-09T20:54:53.880 回答