代码之家 › 专栏 › 技术社区 › SimplGy

当我添加边框时,Firefox是否添加了任何专有值(就像IE对hasLayout所做的那样)?

border cross-browser firefox css

SimplGy · 技术社区 · 15 年前

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

它只在FF3中显示(尚未测试ff2)。

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

以下是问题的图像: footer width problem

Firebug的DOM检查器认为,在这两种情况下,页脚都跨越整个宽度。似乎只有文本align:center没有正确地表示整个宽度。

您在屏幕上看到的1px紫色边框是#centerHolder,它是不同元素的子元素,不应影响页脚的布局,尽管它显然会影响页脚的布局。

谢谢你的评论和想法。

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

2 回复 | 直到 8 年前

Jonny Haynes 15 年前

你需要 clear: both; #footer ,它不会清理你的浮动div #centerHolder

Jeff 15 年前

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

<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>

如果你发现了什么,请告诉我。总是想知道你发现了什么。

推荐文章

Brendan · 如何在Flatter中创建圆形化身周围的虚线边框

2 年前

jpgerb · 为什么寄宿生在桌子上的表现不同?

2 年前

Ponsiva · 有可能只在左边框上做一个渐变吗?

2 年前

rahulkesharwani · 使用CSS合并节标记的边框颜色

6 年前

steerr · 如何通过CSS去除色带边框?

6 年前

Mohammed Sabir · 如何使用css更改4个部分中边界半径的不同颜色集

6 年前

Whazz · 是否可以将WPF边界的BorderBrush绑定到ViewModel类中的变量?

6 年前

bellotas · 边框CSS-意外行为

6 年前

lhermann jfriend00 · Chrome:不透明度对象上的边框宽度不一致

6 年前

Zhihar · css:带背景的选项卡样式边框

6 年前