gog*_*net 3 html css firefox internet-explorer padding
为什么两个浮动块之间FireFox有这么多额外空间？
<html>
<head>
<style type="text/css">
#Container-900px {
width:900px;
padding: 10px;
border: 1px solid #CCCCCC;
}
#Container-900px .left { float:left; width:435px; height:300px; }
#Container-900px .right { float:right; width:435px; height:300px; }
/* float clearing for IE6 */
* html .clearfix{
height: 1%;
overflow: visible;
}
/* float clearing for IE7 */
*+html .clearfix{
min-height: 1%;
}
/* float clearing for everyone else */
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
/* CSS3 Styles */
#Container-900px {
-moz-box-shadow: 0px 0px 12px #CCC; /* Firefox */
-webkit-box-shadow: 0px 10px 12px #CCC; /* Safari, Chrome */
box-shadow: 0px 0px 12px #CCC; /* CSS3 */
}
#Container-900px .left {
background-color: rgb(238, 238, 238);
}
#Container-900px .right {
background-color: rgb(238, 238, 238);
}
</style>
</head>
<body>
<h1>Software</h1>
<div id="Container-900px">
<div class="left">
</div>
<div class="right">
</div>
<div class="clearfix"> </div>
</div>
</body>
</html>
因为省略了doctype导致IE在quirksmode中渲染(这很糟糕).如果您已使用W3 HTML验证程序对其进行了验证,那么它也应该对错误的doctype有误.
添加严格的 doctype应该使HTML和CSS在所有主流浏览器中表现一致(不考虑MSIE仍然存在许多可能修复的错误).
<!doctype html>
<html lang="en">
<!-- here you go -->
</html>
此外还得到#Container-900px .left和#Container-900px .right的宽度445px,以便它沿着该容器的10px的余量非常适合.
#Container-900px .left { float:left; width:445px; height:300px; }
#Container-900px .right { float:right; width:445px; height:300px; }
这种方式在所有浏览器中看起来都很好并且相同.
| 归档时间： |
|
| 查看次数： |
3436 次 |
| 最近记录： |