前言
往往我们强调不同浏览器对于解析同一个样式的效果是不一致的,但是新手们可能很容易就掉入一个以为很高深很麻烦的深渊而不知所措,其实很多东西是需要实践经验才能慢慢记得的。本篇想大致列举一些个人遇到的常见的兼容性以及布局混乱问题。
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
)
分享到:
相关推荐
CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题
CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页...
浏览器兼容常见问题css兼容 css兼容 浏览器兼容 IE6789兼容
CSS控制显示效果是最难得,由于浏览器的不同,显示效果总是有差异的。本篇主要介绍如何减少差异
跨浏览器兼容的CSS代码编程方法,提供给你最实惠的CSS编程技巧,适合CSS2.0、CSS3.0
css渐变代码,代码兼容各个浏览器,适用于ie7以上及各主流浏览器
各浏览器css兼容写法各浏览器css兼容写法
解决浏览器兼容性问题的主要方法是CSS hack。由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面...
跨浏览器兼容CSS篇整理.pdf
css浏览器兼容问题内部资料 欢迎下载!实例研究!
最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)
别具光芒——CSS属性、浏览器兼容
css的颜色,在ie和ff中是不同的,一个是16进制的数字一个是二进制的数字组合,这仅仅是一点点的不同,那么如何兼容各个浏览器,写出比较好的浏览器呢。这个小小的总结应该可以给你一些提示,不是很全面,但是还算...
CSS浏览器兼容问题,解决各个浏览器中css不兼容的问题。
各种浏览器的兼容性和CSS HACK的写法,让你不再为IE6和各种浏览器的兼容性发愁,非常方便!
IE6浏览器兼容问题总结及CSS排版注意地方 列举IE6中10个不得不注意的问题 重构你的代码
css和js的浏览器兼容问题汇总,希望能帮到大家
各浏览器CSS hack兼容表各浏览器CSS hack兼容表
CSS技巧汇总---div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...).pdf
css 浏览器兼容性速查 CSS必不可少的工具