使用CSS修正20多个常见页面Bug
毫无疑问，一个合理的布局和结构是最好选择。这不仅是因为你的布局在不同浏览器见表现不同，而且还因为的CSS有很多方法来布局你的每个元素。今天，我们希望与你们分享一些避免在创建CSS布局时容易遇到的错误的技巧。
IE Bug修正1- Bug修正：IE双倍Margin bug
- 元素是浮动的-并且给元素一个和浮动同一个方向的margin-结果显示两倍的指定margin大小。这个方法非常简单。所有您需要做的就是添加一个display: inline规则到你的浮动元素。所以，你只是把例如这样的代码：
#content {
float: left;
width: 500px;
padding: 10px 15px;
margin-left: 20px; }
改为如下代码 :
#content {
float: left;
width: 500px;
padding: 10px 15px;
margin-left: 20px;
display:inline;
}
2- 克服盒模型hack
- 如果你想给任一div指定宽度，不要指定padding或margin。只要另建一个内部(嵌套)的没有宽度的div并设定其padding和margin来替代。所以，不要这样做：
#main-div{
width: 150px;
border: 5px;
padding: 20px;
}
这样做:
#main-div{
width: 150px;
}
#main-div div{
border: 5px;
padding: 20px;
}
3-IE无视min-height属性
- min-height属性在firefox下表现很好但是IE却无视了它，IE的height就像FF的min-height.注意：IE7没有这个bug。
/* 对主流浏览器 */
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em;
height:auto;
}
/* 对IE浏览器 */
/*\*/
* html .container {
height: 8em;
}
/**/
4- Min-Width for IE
-一个IE的min-width缺陷的修正。
5-块级元素居中
- 有很多种方法可以使块级元素居中；选择哪种方法取决于你的百分比大小设置或使用更绝对的数值。
整个页面内容居中：
body{
text-align: center;
}
#container
{
text-align: left;
width: 960px;
margin: 0 auto;
}