Fatal编程技术网
  • css/
  • Css 当我添加边框时，Firefox是否添加了任何专有值（就像IE对hasLayout所做的那样）？

Css 当我添加边框时，Firefox是否添加了任何专有值（就像IE对hasLayout所做的那样）？

css firefox

Css 当我添加边框时，Firefox是否添加了任何专有值（就像IE对hasLayout所做的那样）？,css,firefox,cross-browser,border,Css,Firefox,Cross Browser,Border,我有一个布局问题，看起来像一个浏览器错误 它只在FF3中显示（尚未测试ff2） 它只在第一次加载页面时显示。如果我调整窗口大小，它将正常工作 当我在问题元素上设置边界时，它消失了，当我去掉边界时，它又回来了 没有其他属性更改 以下是问题的图像： Firebug的DOM检查器认为，在这两种情况下，页脚都跨越整个宽度。似乎只有文本align:center没有正确地表示整个宽度。 *更新：取消文本对齐：居中不会解决此问题。文本与屏幕左侧齐平（正确）或紫色框（不正确） 您在屏幕上看到的1px紫色边框是

我有一个布局问题，看起来像一个浏览器错误

它只在FF3中显示（尚未测试ff2）

它只在第一次加载页面时显示。如果我调整窗口大小，它将正常工作

当我在问题元素上设置边界时，它消失了，当我去掉边界时，它又回来了

没有其他属性更改

以下是问题的图像：

Firebug的DOM检查器认为，在这两种情况下，页脚都跨越整个宽度。似乎只有文本align:center没有正确地表示整个宽度。 *更新：取消文本对齐：居中不会解决此问题。文本与屏幕左侧齐平（正确）或紫色框（不正确）

您在屏幕上看到的1px紫色边框是#centerHolder，它是不同元素的子元素，不应影响页脚的布局，尽管它显然会影响页脚的布局。 *更新：将紫色框的高度缩小到85%，而这不可能成为阻碍，根本无法改变问题。文本仍然认为紫色框是阻碍

谢谢你的评论和想法

HTML:

您需要
清除：两个
在你的
#页脚
上，它没有清除你的浮动div
#centerHolder
我想你的页面上还有其他东西没有找到。比如一个可能的DIV标签没有正确关闭。FireFox将为您关闭标签，如果它们保持打开状态，但不在您希望的位置。纠正这个问题的边界似乎迫使DOM认识到对象的范围应该更广。请参阅下面我直接从您的示例中获取的代码，并对其进行测试。它在我安装的FF 3.5.5上运行得非常完美

注意：找到不正确关闭的标记的一种快速方法是将HTML重命名为XML文件扩展名，并使用FF打开它。它应该正确地解析文件。如果没有，它将指向标签打开的位置


#容器{
位置：相对位置；
身高：96%；
最小高度：600px；
宽度：100%；
最小宽度：975px；
最大宽度：1300px；
保证金：0自动；
z指数：2；
}
#中心架{
浮动：左；
左边距：245px；
宽度：10%；
z指数：1000；
}
#页脚{
/*边框：1px纯绿色*/
保证金：0；
垫面：5px；
位置：相对位置；
文本对齐：居中；
z指数：1；
}
这里有一些文字


版权所有©2009拉拉公司
如果你发现了什么，请告诉我。总是想知道你发现了什么。

天哪，这是完全正确的，我简直不敢相信。（不敢相信，因为这个问题已经解决了浏览器的大小调整问题，而令人不快的浮动是一个远亲）但补充一点：事实上，两者都解决了这个问题。谢谢。没问题，事情总是很简单的。。。直视着你的脸！：-D 
<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>

#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;
}

<html>
<head>
<style>
#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;
}

</style>
</head>


<body>
<div id="container">
    <div id="centerHolder">Here's some text</div>
</div>
<p id="footer">
    Copyright ©2009 Lala Corporation
    <a class="link" onclick="ContactUs_OnClick(); return false;" 

href="#">Contact Us</a>
</p>
</body>
</html>