[英]Firefox 1.5 and 2 css absolute position bug
我有以下html / css在Firefox 1.5和2中引起問題,但在IE6 / 7/8,Safari,Chrome,Opera和Firefox 1和3中正常工作。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Firefox Bug</title>
<style type="text/css">
* { border: 0; padding: 0; margin: 0; }
#wrapper {
width: 500px;
min-height: 550px;
height: auto !important;
height: 550px;
border: 5px solid blue;
position: relative;
display: inline;
overflow: auto;
float: left;
}
#content {
border: 5px solid green;
}
#bottom {
border: 5px solid red;
position: absolute;
bottom: 0;
right: 0;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
Foo
</div>
<div id="bottom">
Bar
</div>
</div>
</body>
</html>
在運行正常的瀏覽器中,底部元素顯示在包裝器元素的右下角。 但是,在Firefox 2中,底部元素位於content元素的底部。 我不知道為什么會這樣,任何幫助將不勝感激。
預期成績
Firefox 2錯誤
我能夠找到一種解決方法,但是我仍然不明白出了什么問題。 我的解決方法不是靈丹妙葯,但可以解決我的問題。
刪除IE的最小高度變通方法似乎可以使它做正確的事。 該解決方案的問題在於,如果content元素大於高度,則滾動條將針對溢出的內容出現。
#wrapper {
width: 500px;
height: 550px;
border: 5px solid blue;
position: relative;
display: inline;
overflow: auto;
float: left;
}
要么脫下
float: left.
或嘗試改變
bottom: 0
至
top: 100%;
從#wrapper中刪除overflow:auto。
眾所周知,對於所有瀏覽器來說,混合浮動和絕對定位都是很難做到的-它們似乎都實現了自己的小怪癖。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.