`
rapheal
  • 浏览: 171076 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

写不同浏览器兼容的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

1
2
分享到:
评论
2 楼 rapheal 2011-08-06  
yzhw 写道
期待下一篇,一口气全看完了

谢谢关注哈,有误的地方还请指正
1 楼 yzhw 2011-08-06  
期待下一篇,一口气全看完了

相关推荐

    CSS在不同浏览器中兼容问题

    CSS 在不同浏览器中的兼容问题 CSS 在不同浏览器中的兼容问题是 web 开发中的一大挑战。不同的浏览器对 CSS 的解析和渲染方式存在差异,从而导致相同的 CSS 代码在不同浏览器中显示效果不同。本文将总结常见的 CSS ...

    跨浏览器兼容CSS篇

    ### 跨浏览器兼容CSS篇:实现一致性的策略与技巧 #### 一、引言 在Web设计领域,确保网站在不同浏览器中呈现一致的效果是一项挑战性任务。由于各种浏览器对CSS的支持程度不尽相同,开发者经常面临布局差异的问题。...

    CSS属性、浏览器兼容与网页布局

    CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页...

    跨浏览器兼容的CSS代码编程方法

    然而,在实际开发中,由于不同浏览器对CSS的支持程度不同,导致了跨浏览器兼容性问题成为了一个长期困扰开发者的问题。本文将详细介绍如何编写跨浏览器兼容的CSS代码,并分享一些实用的技巧。 #### 二、CSS兼容性的...

    浏览器兼容常见问题css兼容

    浏览器兼容常见问题css兼容 css兼容 浏览器兼容 IE6789兼容

    别具光芒——CSS属性、浏览器兼容与网页布局

    通过学习和掌握这些CSS属性、浏览器兼容性和网页布局的知识,开发者可以创建出既美观又能在不同浏览器和设备上良好展示的网页。持续关注新的CSS规范和发展趋势,如CSS Houdini、CSS Scroll Snap等,将有助于保持技术...

    css 浏览器兼容性速查

    "CSS浏览器兼容性速查"是开发者在工作中不可或缺的一个参考资料,它帮助我们了解各种CSS属性在不同浏览器上的表现,以便于优化代码,确保网站在主流浏览器上都能正常显示。 首先,我们要理解浏览器兼容性问题的来源...

    兼容各浏览器的css渐变

    css渐变代码,代码兼容各个浏览器,适用于ie7以上及各主流浏览器

    最全的CSS浏览器兼容问题

    以下是一些常见的CSS浏览器兼容性问题及其解决方案: 1. **垂直居中问题**: 在CSS中,要实现一个div的垂直居中,可以使用`vertical-align: middle;`和`line-height`属性。但这种方法要求内容不换行。例如: ```...

    css浏览器兼容问题

    ### CSS浏览器兼容问题详解 #### 一、引言 随着Web技术的发展,不同的浏览器对于CSS的支持程度也有所不同,这导致了在开发过程中经常会遇到浏览器之间的兼容性问题。本文旨在总结和分享一系列关于CSS兼容性的技巧...

    各浏览器css兼容写法

    还可以使用在线工具,如Can I Use,来查看CSS特性的浏览器兼容性信息。 在编写CSS时,理解并应用以上知识点,能够有效提升代码的兼容性和可维护性。同时,持续关注CSS规范的发展和浏览器的更新,以便及时调整和优化...

    css浏览器兼容写法

    在网页设计中,CSS(层叠样式表)的浏览器兼容性问题是一大挑战,尤其是在处理老版本的浏览器,如IE6、IE7时。不同浏览器对CSS的理解和解析方式存在差异,导致样式在不同浏览器中可能表现不一致。本文将详细介绍如何...

    跨浏览器兼容CSS篇整理.pdf

    跨浏览器兼容性是Web开发中的一个关键议题,尤其是在CSS领域。由于不同的浏览器对CSS标准的实现存在差异,设计师和开发者需要采取策略确保网站在不同浏览器上表现一致。本文主要聚焦于CSS的跨浏览器兼容性,特别是...

    不同浏览器 不同css学习总结

    css的颜色,在ie和ff中是不同的,一个是16进制的数字一个是二进制的数字组合,这仅仅是一点点的不同,那么如何兼容各个浏览器,写出比较好的浏览器呢。这个小小的总结应该可以给你一些提示,不是很全面,但是还算...

    CSS浏览器兼容问题

    CSS浏览器兼容问题,解决各个浏览器中css不兼容的问题。

    区别不同浏览器CSS hack

    通过对上述示例的分析,我们可以清晰地看到如何利用CSS Hack来解决浏览器兼容性问题。通过精心设计这些Hack,开发者可以确保网页在不同浏览器中展现出一致的外观。然而,随着现代浏览器的发展和CSS标准的不断完善,...

    div+css中常见的浏览器兼容性处理

    【CSS浏览器兼容性处理】 在Web开发中,CSS(层叠样式表)是用于控制网页元素样式的关键技术。然而,不同的浏览器对CSS的理解和解析方式存在差异,这可能导致在某些浏览器下网页显示不正常。特别是在使用div+css...

    css浏览器兼容.docx

    CSS浏览器兼容性问题解决方案 CSS浏览器兼容性问题是Web开发中常见的问题。不同的浏览器对CSS的解析方式不同,这就导致了浏览器之间的兼容性问题。了解浏览器的兼容性问题是非常重要的,为此,我们总结了一些常见的...

Global site tag (gtag.js) - Google Analytics