IE6布局问题 - 绝对定位

以下HTML看起来需要Firefox 2 & 3和IE7。 Left按钮位于左侧，Right按钮位于右侧，中间的文本位于中间位置！IE6布局问题 - 绝对定位

但是，在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工具，试图分析和解决这个问题，但没有成功...）

来源

2009-02-11 Richard Everett

必须触发hasLayout财产#footer（一个IE浏览器的事情...）。宽度和高度触发它，如果您不想设置宽度或高度，则可以使用CSS中仅限IE的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可以解决很多奇怪的布局问题，比如这个。

来源

2009-02-11 17:24:35 nlogax

这相当反向！谢谢乔纳斯。这几乎完美的作品 - 它似乎推动我的含有div的宽度在IE6中的几个像素。 – 2009-02-11 17:36:05

设置缩放将改变光标。可能只想通过在规则前面加上_来限制IE6的使用。 – 2009-02-11 17:49:56

你的浮动/定位的元素应该是第一顺序通常对齐文本之前。不要按照它们出现的顺序排列它们。

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

它看起来应该只是工作。

来源

2009-02-11 17:13:00

谢谢，但这似乎没有改变的事情。这也会让使用屏幕阅读器的用户感到困惑。 – 2009-02-11 17:15:58

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

<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-11 17:14:36 AJM

非常好 - 谢谢AJM！但是，在IE6中，左侧按钮和页脚边缘之间现在有一个20px的间隔... – 2009-02-11 17:18:14

我要提出一个有点机会的你的方法，看看您是否有任何这方面的运气：在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>

那么你将不得不

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

然后通过并给他们一些利润来排列你想要他们的方式。这不适用于流体布局，除非您给页脚或脚注中的容器固定宽度。

来源

2009-02-12 01:26:53 Matt

正如乔纳斯所说。

无论什么时候有疑问，我建议明确指定一个宽度，即使不是必需的，并且我更喜欢将其用于“缩放”，因为缩放不是为了解决布局问题而设计的。然而，显式设置宽度并不总是可行的，所以“缩放”就是这样做的。

来源

2009-02-12 23:19:51

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

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

似乎“钉”在位的div盒。

我已经尝试了所有其他的建议我已阅读（包括JavaScript强制ie6行为像ie7或ie8），但他们没有奏效。

上述解决方案的确如此。

祝你好运！

来源

2010-02-09 20:54:53

IE6布局问题 - 绝对定位

回答

相关问题