這是我正在開發的一個頁面的輪廓。IE7和Firefox 3渲染區別
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="../css/test.css" />
<title>Prosperity Login</title>
</head>
<body>
<div id="banner">
</div>
<div id="subbanner">
</div>
<div id="body">
<div id="colA">
</div>
<div id="colB">
<div id="B1">
</div>
<div id="B2">
</div>
</div>
<div id="colC">
</div>
<div id="colD">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
而CSS:
* {
margin: 0px;
padding: 0px;
}
div {
border: 1px dotted;
}
#banner {
height: 70px;
width: 100%;
}
#subbanner {
height: 30px;
width: 100%;
}
#body {
background-color: #CCFFCC;
width: 80%;
}
#colA{
float: left;
height: 120px;
width: 24%;
}
#colB{
float: left;
height: 80px;
width: 24%;
}
#colC{
float: left;
height: 120px;
width: 24%;
}
#colD{
float: left;
height: 120px;
width: 24%;
}
#B1{
float: right;
height: 48px;
width: 80%;
}
#B2{
float: right;
height: 28px;
width: 80%;
}
#footer{
height: 30px;
width: 100%;
}
在Firefox 3,身體的div(綠色背景)被壓扁到幾乎沒有,而IE7渲染頁面完美。從我所知道的CSS 2.1標準(通過邁耶的O'Reilly書),浮動div應該漂浮在他們的容器塊,這顯然不是火狐3的情況。
因此,如果Firefox的渲染是兼容的,什麼是我錯過了?
要注意,Opera呈現類似於Firefox。 – strager 2009-03-01 21:35:39
http://jsbin.com/eyanu – strager 2009-03-01 21:36:40