如何写出兼容性强的CSS代码,适应各种浏览器:IE、火狐等-阿里云开发者社区

开发者社区> 老朱教授> 正文

如何写出兼容性强的CSS代码,适应各种浏览器:IE、火狐等

简介:
+关注继续查看

关于CSS,我相信刚入门或者入门没有多久的人都会觉得,CSS太难兼容各个浏览器,兼容了IE6不兼容IE7,兼容了IE7的话IE6又有问题,还有IE8,IE9,FirFox,Chrome等等浏览器

或许你会从网上去找兼容各种浏览器的不同方法,比如所说的hackbox,这是利用不同浏览器对于一些特别的代码的认可性。比如:
.class{margin-left:10px;}
*html  .class{ margin-left:20px;}

这样写的话class左边外间距就是10px,那么*html只能在IE6下面被识别,其他浏览器是不认识他,那么其他浏览器依然是左边外间距10px, 然而在IE6下面则成了20px,这个和程序一样,代码从上往下执行,下面的覆盖上面的。除了这样的还有其他的各种浏览器的不同标签,还有<!– !important –>等等。这样做也太繁琐了,而且终究不是正道,或许我们会想有没有一种代码方式,可以不用做特殊处理就兼容各种浏览器呢?有。

CSS代码写出来为什么不会兼容各种浏览器?你 去网上搜索一下,主要原因还是各种浏览器对于margin,以及padding还有float等几种个别的属性不兼容而已,所以我们尽量的要处理好这几种 属性,或者可以说是避免使用margin以及padding。你可能会问,不使用margin和padding的话能用CSS写出合适的页面吗?内外间距 怎么办?怎么处理?

我们拿一个很简单的例子来说吧,
<ul>
<li></li>
<li></li>
</ul>
我相信以上这四行代码在写CSS的时候再常见不过了,而这段代码就这么直接产生的效果肯定不是我们想要的,我们要给它调颜色,间距等等,然而调间距就涉及 到了margin和padding,然后涉及到这两个东西的时候又会造成各个浏览器显示的内容不一样,那么,我们可不可以换一种方式来达到我们要的效果 呢?当然可以,我们直接给<li>标签设置固定的高度,宽度,以及行高,这样也可以达到我们想要的效果,你不妨试一下。

至于float造成的变形,也很好办,比如一行三个栏目,不要想着前面两个栏目float:left;第三个就不用了,不要珍惜那一句代码,第三个也要写上,这一行布局完之后记得清除浮动,clear:clearboth;然后再开始布局下一行。

还有比较重要的一点就是,浏览器对于CSS的各种属性的默认值是不一样的,所以在刚开始一定要定义全局代码,清除margin,padding等等,这样不仅仅对于兼容浏览器有帮助,也对于你能写出高效代码有帮助。

CSS代码布局要严谨,每个DIV宽和高(有时候需要auto)是多少px就是px,一定要定义清楚,因为各个浏览器的默认值也不一样,还有就是为 每个div都用上overflow:hedden;清楚溢出,这样即使是有些地方使用了paddding,也不对你的整体布局造成明显的影响。

最后,还是需要多多尝试,多多思考,多多总结。以上内容页是我自己慢慢摸索出来的。




本文转自黄聪博客园博客,原文链接:http://www.cnblogs.com/huangcong/archive/2011/06/28/2092116.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
EnjoyCSS – 在线的,先进的 CSS3 代码生成器
  EnjoyCSS 是一款先进的 CSS3 代码生成工具,可以让你摆脱日常的编码。它方便和易于使用的用户界面允许您快速,无需编码就可以调节出丰富的图形样式。您将能够玩转所有的 EnjoyCSS 参数,就像在 Photoshop 或 illustarator 中一样,结合所有可能的 CSS3 样式功能。
1041 0
同时使用Junit4的@Parameterized参数化测试和Spring容器
同时使用Junit4的@Parameterized参数化测试和Spring容器整合 之剑 2016.4.30 整合Spring容器 @SpringApplicationConfiguration(classes = Application.
1034 0
常见的浏览器兼容性问题总结
1. 不同浏览器的标签默认外补丁margin和内补丁padding不同 发生概率:100% 解决方案:使用CSS通配符*,设置内外补丁为0 *{ margin: 0; padding: 0;} 2.
1551 0
+关注
3546
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载