CSS学习笔记-浏览器兼容性（十）

最新推荐文章于 2024-04-21 22:53:42 发布

望道同学

最新推荐文章于 2024-04-21 22:53:42 发布

阅读量520

点赞数

文章标签： css 浏览器 ie 6 ie 7

本文链接：https://blog.csdn.net/qq_26927285/article/details/52714159

版权

html+css 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

什么是浏览器兼容性

当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。而兼容就是一种办法，能让你在一个CSS里面独立的写支持不同浏览器的样式。解决兼容性问题大致有三种办法。

全局CSS样式设置

常用CSS兼容性样式

CSS HACK

浏览器市场份额统计
http://tongji.baidu.com/data/browser

全局CSS样式设置

1、清除网页中所有标签的内外边距
body,div,ul,li,ol,a,span,h1,h2 { margin:0px; padding:0px;}

2、全局字体设置
body{ font-size:12px; font-family: simsun,arial,helvetica; background:#fff; } 

3、标题样式设置
h1{padding:11px 0 0; margin-bottom:4px;font:normal 20px/30px 黑体;text-align:center;} 

h2 { padding:6px 0 0; margin-bottom:4px; font:normal 20px/30px 黑体; text-align:center; } 

h3{font-size:12px}   

h4{font-size:12px;font-weight:normal}  

4、项目符号和编号
ul,ol,li{ list-style: none ; }

全局样式设置

5、图片
img{ border:none; } 

6、超级链接
a{ text-decoration:none; cursor:pointer; } 
a:link,a:visited{ color:#004276; }  
a:hover{ text-decoration:underline; color:#ba2636; }  

7、清除与浮动 

.floatLeft{ float:left; } 
.floatRight{ float:right; } 
.clear{clear:both; } 
.blank10{height:10px; overflow:hidden; clear:both; } 
8、字体颜色
.black {color:#000;} 
.white {color:#fff;} 
.red {color:#e10007; } 
.grey {color:#454545;} 
.orange {color:#ff7200;} 
.blue {color:#3a8ecf;} 

**其它常用CSS兼容问题**
---------------

布局页面水平居中
--------

使用div布局时，要想让整个网页居中显示，不同浏览器显示效果不一样。在IE下要想让box层居中显示，使用text-align就可以了；但在Firefox下不起作用，需要在box上加margin:0px auto来实现。因此满足所有浏览器的效果，则可将两种代码整合。 如下例所示：

<style type="text/css"> 
body{ margin:0px; padding:0px; text-align:center; } 
.box{ text-align:left; margin:0px auto; } 
</style> 
<html> 
<body> 
<div class="box">测试内容</div> 
</body> 
</html>

DIV中单行内容垂直居中（例如：新闻标题）

<style type="text/css"> 
.title{ height:30px; line-height:30px;  text-align:center;} 
</style> 
<html> 
<body> 
<div class="title">新闻标题</div> 
</body> 
</html>

IE中DIV浮动时，margin左右加倍的问题

设置为float的div在IE下设置的margin会加倍。这是一个IE6都存在的bug。解决方案是在这个div里面加上display:inline;

<style type="text/css">.div{
      float:left;
      margin:10px;
      display:inline;
 }</style>

IE6下无法定义1px行高的容器

为什么无法定义1px左右高度的容器，IE6下这个问题是因为默认的行高造成的。解决办法：overflow:hidden

.blank1{
    height:1px; 
    overflow:hidden;
    background-color:#ccc; 
}

cursor:hand和cursor:pointer

问题说明：firefox不支持hand，但ie支持；两者都支持pointer ，两者都是手形指示。解决方法：统一使用pointer。

CSS HACK

CSS HACK概述
由于不同的浏览器，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。针对不同的浏览器写不同的CSS code的过程，就叫CSS hack!

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。CSS Hack大致有2种表现形式，CSS类内部Hack、选择器Hack，CSS Hack主要针对IE浏览器。

CSS HACK分类

类内部HACK
类内部HACK书写顺序：FF－ IE7－ IE6

a)通用代码
    div{ background-color:#990000; } 
b) "*" 能识别IE6和IE7 
    div { *background-color:#990000; } 
c) "_"只能识别IE6 
    div { _background-color:#990000; }

选择器HACK

A）"*html"能识别IE6 
      *html .box { background-color:#990000; } 
B) "*+html"能识别IE7 
      *+html .box{ background-color:#990000; }

书写CSS HACK注意事项

书写顺序，一般是将识别能力强的浏览器的CSS写在前面。
一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack
css hack虽然可以解决个浏览器之间css显示的差异问题，但是毕竟不符合W3C规范，我们平时写css最好是按照标准来，这样对我们以后维护也是大有好处的，实在不行再用。

望道同学

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记-浏览器兼容性（十）

什么是浏览器兼容性当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。而兼容就是一种办法，能让你在一个CSS里面独立的写支持不同浏览器的样式。解决兼容性问题大致有三种办法。全局CSS样式设置常用CSS兼容性样式CS
复制链接

扫一扫