gpt4 book ai didi

html - IE6 布局问题 - 绝对定位

转载 作者:太空狗 更新时间:2023-10-29 16:52:16 25 4
gpt4 key购买 nike

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

最佳答案

您必须触发 #footerhasLayout 属性(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 中,元素有两种不同的布局行为,一种是 hasLayouttrue,另一种是 false。确保将其设置为 true 可以解决很多像这样的奇怪布局问题。

关于html - IE6 布局问题 - 绝对定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/537737/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com