写不同浏览器兼容的CSS

前言

往往我们强调不同浏览器对于解析同一个样式的效果是不一致的，但是新手们可能很容易就掉入一个以为很高深很麻烦的深渊而不知所措，其实很多东西是需要实践经验才能慢慢记得的。本篇想大致列举一些个人遇到的常见的兼容性以及布局混乱问题。

 

CSS Reset

什么是CSS Reset？你可能遇到过明明写着body底下的第一个块没有设置任何边距，而偏偏就是有一块空白在上边，其实这个就是浏览器默认的样式，是浏览器为body默认了一些内边距导致了上述现象。并且各个浏览器对于这个默认的样式值是不一样的，于是乎我们需要reset一下。至于怎么reset，继续考验自己的搜索水平吧。当然写一些测试的话，我一般直接就写一个：

*{margin:0;padding:0}

推荐阅读一下打造自己的reset.css 以及UED玉伯这篇Reset CSS研究（八卦篇） 里边的内容以及其参考资料。

 

IE的hasLayout

经常会用到浮动，但是往往你在浮动块加上一些外边距，IE低版本就会有double这个边距，这着实让人郁闷。IE的元素底下有haslayout属性，这个有什么用呢？按照我的理解，它是用来触发渲染器重新计算它底下的子元素的一些尺寸。经常调试IE就会发现，很多问题只需要触发这个属性即可解决，至于有什么情况需要触发了，我不想在没做具体的实验前误导别人。大家可以在遇到一些IE底下布局混乱的问题是用一些方法触发haslayout。例如我经常会用到的：

.demo{display:inline;zoom:1}

 

浮动

浮动这玩意就用得多了，有时候用到浮动会发现浮动元素的下边一些元素会跟它们重叠了，往往这就是因为浮动未清除，前面有篇文章我就稍微提过渲染是有分文档流跟浮动流的，清除浮动为了使得父元素能够感知浮动元素已经占用的空间，给父元素的下个节点不会覆盖到浮动元素。

往往我清除的方法有3个，暂时列举两个：

.clear{clear:both;height:0;}

<div>
    <div>浮动元素</div>
    <div>浮动元素</div>
    <div>浮动元素</div>
    <div>浮动元素</div>
    <div class="clear"></div>
</div>

 

.clear-float{overflow:hidden;/*或者auto*/}

<div class="clear-float">
    <div>浮动元素</div>
    <div>浮动元素</div>
    <div>浮动元素</div>
    <div>浮动元素</div>
</div>

第一个方法需要添加一个额外的标签到末尾，第二种方法在一些模式下会不能清除，我常使用的清除浮动的第三种方法：

.float_parent:after{
	display:block;
	clear:both;
	content:"";
	visibility:hidden;
	height:0;
}
.float_parent{
	overflow:hidden;
	*zoom:1
}/*IE hack haslayout*/

 

最后推荐一个Nicolas Gallagher给的简洁方案：

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

 

定位Postion

以前我对position这个属性真的是很怕，因为跟熟知的文档流不一样了，它可以试你的元素不受限制的在页面上的各个位置跟其他元素重叠了，所以我就认为它很复杂，一直没怎么写过这个属性。但是有些时候你用到的时候会经常去乱试一下它，这样的办法反而效率很低，正确的做法更应该去查一下position详解之类的，会从很多写得很好的博客中获取到知识，要注意的是IE6不支持position:fixed，需要采用别的做法去完成这个效果。当然了，在之后我也会传DEMO上来详细解释一下。

 

常见布局

先列出常用的一些布局样式：

块居中                      margin:0 auto;

文字行间距                line-height:21px;

浮出层                      position:fixed;top:0;z-index:1000;

待续......

 

本篇总结

在一些标准的浏览器上边也会有一些bug，但是基本较少，一般能够通过Chrome跟FF的基本就能满足需求了，当然我们需要对IE6+进行单独的 调试，让前端重构师耗了不少时间在这上边，尤其是IE6，在此呼吁大家抛弃万恶的IE6以及IE系列，使用FF或者Chrome等更加符合标准更加速度的 浏览器（如果要网银或者某些播放器，那还是得回到那个IE底下）。

本文有些地方仅为经验之谈，尚未实验，待后续修改并上传DEMO。

 

PS:有关IE底下的BUG：

可以参考 http://haslayout.net/css/index （酷壳上翻译： http://coolshell.cn/articles/1245.html ）

评论

2 楼 rapheal 2011-08-06  

yzhw 写道

期待下一篇，一口气全看完了

谢谢关注哈，有误的地方还请指正

1 楼 yzhw 2011-08-06  

期待下一篇，一口气全看完了