以下 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工具尝试分析和修复这个问题，但无济于事...)
最佳答案
您必须触发 #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 可以解决很多像这样的奇怪布局问题。
关于html - IE6 布局问题 - 绝对定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/537737/