我有一个看起来像浏览器错误的布局问题。
它仅在 FF3 中出现(未测试 ff2)。
它只在页面第一次加载时显示。如果我调整窗口大小,它会正常运行。
当我在问题元素上添加边框时它消失了,当我取消边框时它又回来了。
其他属性没有变化。
这是问题的图片:
Firebug 的 DOM 检查器认为页脚在这两种情况下都占据了整个宽度。似乎只有 text-align:center 没有正确地尊重整个宽度。 *更新:取消 text-align:center 并不能解决问题。文本与屏幕左侧齐平(正确)或紫色框(错误)。
您在屏幕上看到的 1px 紫色边框是 #centerHolder,它是另一个元素的子元素,应该不会影响页脚的布局,尽管它显然会影响。 *更新:将紫色框的高度缩小到 85%,它不可能挡路,根本不会改变问题。文本仍然认为紫色框挡住了路。
感谢您的意见和想法。
HTML:
<div id="container">
<div id="centerHolder"></div>
</div>
<p id="footer">
Copyright ©2009 Lala Corporation
<a class="link" onclick="ContactUs_OnClick(); return false;" href="#">Contact Us</a>
</p>
CSS:
#container{
position:relative;
height:96%;
min-height:600px;
width:100%;
min-width:975px;
max-width:1300px;
margin:0 auto;
z-index:2;
}
#centerHolder {
float:left;
margin-left:245px;
width:10%;
z-index:1000;
}
#footer {
border:1px solid green;
margin:0;
padding-top:5px;
position:relative;
text-align:center;
z-index:1;
}
最佳答案
你需要 clear: both;
在你的 #footer
上,它不会清除你的 float div #centerHolder
关于css - 当我添加边框时,Firefox 是否会添加任何专有值(就像 IE 对 hasLayout 所做的那样)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1791068/