Ric*_*ett 4 html css internet-explorer-6 web
以下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工具来尝试分析并修复它,但无济于事......)
nlo*_*gax 13
你必须触发hasLayout属性(IE的东西......)#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中,元素有两种不同的布局行为,一种hasLayout是if true,另一种是if false.确保它设置为true可以解决许多奇怪的布局问题,如这一个.