五，浏览器兼容性问题及解决方法

一，IE6中存在的兼容性问题

1.IE6 中不支持子元素选择器（语法：父元素>子元素），只能通过JS来解决

2.IE6中不支持对超链接以外的元素设置hover和active伪类

：link 表示普通超链接（没访问过的）

：visited 表示访问过的超链接，

：visited 表示访问过的超链接（涉及到用户隐私，只能设置字体颜色），

：active 表示鼠标点击时的状态，被激活状态

hover和active也可以为其他元素设置，在IE6中不支持对超链接以外的元素设置hover和active

3.IE6不支持获取焦点伪类

:focus  获取焦点  获取文本框的焦点

4.IE6中不会为短引用q标签中的内容添加引号

q标签：表示短引用，浏览器会默认加上“”，通过CSS来加的，我们在浏览器哄无法选中这个引号，q:before{content:'""'}

IE6中不会添加引号，IE8中的引号跟火狐中的不一样

5.IE6中不支持固定定位，通过JS来设置

6.IE8及以下浏览器不支持透明度opacity，opacity：0-1之间的指 ，0完全不透明，1完全透明，

但在IE8及以下浏览器中不支持，须使用alpha(opacity=透明度)，透明度0-100之间的值，

7.IE6 png背景修复问题

IE6中对图片格式png24，支持度不高，如果使用图片格式是png24则会导致透明效果不能正常显示，

1）使用png8代替png24，清晰度会有一定的损失

2）使用JS来解决问题，在Body标签最后引入外部JS文件DD_belatedPNG_0.08a.js（可以在往上下载），

8、IE6双倍边距的bug

在IE6中当为一个向左浮动的元素设置左外边距，向右浮动的元素设置有外边距这个边距将会是设置值的2倍。

给浮动元素设置：display:inline

9.ＩＥ浏览器不支持二进制表示　0b

二，火狐中存在的兼容性问题

1.火狐中需要采用其他方式来支持 ：：selection 伪类，

：：selection 为标签中选中的内容添加样式

//兼容狐火浏览器

p::-moz-selection{}

//兼容大部分浏览器

p::sclection{}

三，在解决高度塌陷问题时IE6及以下浏览器不兼容

高度塌陷：指父元素的宽高没有指定，在正常文档流中由子元素撑开，但是给子元素设置浮动后，子元素就会脱离文档流，就无法撑开父元素的高度，父元素下面的元素会向上移动，导致页面布局混乱。在解决这个问题时我们开启BFC属性，

解决高度塌陷：

1）可以将父元素的高度写死，以避免高度塌陷问题，但是一旦高度写死，父元素的高度不能自动适应子元素的高度，不推荐使用。

根据W3C的标准，在页面中都有一个隐含的属性BFC，默认是关闭的。当开启BFC以后：

               1）父元素的垂直外边距不会和子元素重叠（解决父子元素垂直外边距问题），

               2）开启BFC的元素不会被浮动元素所覆盖

               3）开启BFC的父元素可以包含浮动的子元素（浮动子元素可以撑开父元素）

               4）将元素的overflow设置为一个非visible的值，

如何开启BFC：

               1）设置父元素浮动，可以解决当前父子元素的塌陷问题，但是父子元素都浮动就会使父元素下面的元素向上移动，父元素的宽度没了

               2）设置父元素的绝对定位（position: absolute;）也会导致上面的问题，下面的元素向上移动，父元素的宽度没了

               3）设置父元素为inline-block（;display: inline-block;）可以解决问题，但是父元素与下面的元素之间会有一个空隙，父元素的宽度没了

以上三种方式开启BFC都会导致宽度没了，都是子元素的宽度。

              4）设置父元素的overfloe属性：overflow: scroll;会出现滚动条，overflow: hidden/auto可以解决，推荐使用，是开启BFC代价最小的方式

但是IE6及以下浏览器并不支持BFC，但是具有另一个隐含的属性叫做has Layout，该属性的作用和BFC作用类似，所以在IE6浏览器中，通过开启hasLayout来解决问题。直接将父元素的zoom 设置为1即可。zoom放大，放大几倍。zoom只在IE中支持。

在一般浏览器中，overflow:hidden就可以了，在IE6中需要zoom:1;两个代码写一起，zoom只在IE浏览器中支持。

3）.清除浮动

clear可以用来清除其他浮动元素对当前元素的影响，可选值：

  none：默认值，，不清楚浮动

  left：清除左侧浮动元素对当前元素的影响

   right:

   both:清除两侧浮动元素对当前元素的影响，清除对它影响最大的元素的浮动。

在高度塌陷的父元素最后添加一个空白的块元素，这个块元素没有浮动可以撑开父元素，但是它受浮动元素影响，需要对它清除浮动，不存在兼容性问题。

使用这种方式可以解决问题，但是会在页面中添加多余的结构。

4）不添加多余的结构解决塌陷问题

通过HTML添加的块元素会添加多余的结构，我们也可以通过ＣＳＳ来向父元素最后添加一个块元素，通过after伪类向父元素最后添加一个空白的块元素，然后对其清楚浮动，这个和添加一个空白的块元素div原理是一样的，可以达到相同的效果，切不会在页面添加多余的ＤＩＶ　

此时这样写的话只能给box1使用，我们可以设置成一个类名让其通用。在IE6中不支持after伪类，还需要zoom:1来兼容。

一共6种方法解决。

第5种：在父元素后加空ＤＩＶ然后对其清楚浮动

第６种：：after伪类

需要注意的是在使用overflow::hidden .zoom:1时存在一点问题，在父元素中还存在相对定位的元素，而又对父元素使用hidden,那么当相对定位元素移动到父元素以外就看不见了。

父子元素相邻垂直外边距问题：当父子元素的垂直外边距相邻时，给子元素设置margin-top:10px;会传递给父元素，父子元素一起下移10培训；父子元素外边距依旧是贴在一起相邻的，解决方法：

1）在父子元素之间添加一个字符串是其不相邻，会在网页中添加多余的文本元素

2）给父元素设置 border: 1px solid red;会改变盒子可见框的大小

3）给父元素设置padding-top: 1px;会影响盒子可见框的大小

4）在父子元素之间添加一个空白的div是不行的，添加一个空白的table是可以的，但是依旧会在网页中添加多余的元素

兄弟元素垂直外边距问题：兄弟元素垂直外边距相邻时，给上兄弟设置margin-bottom，给下兄弟设置margin-top，此时这两个兄弟元素之间的外边距不是两个值相加而是取其中大的值

1）在两个兄弟元素之间添加一个字符串，是两个兄弟元素垂直方向的外边距不相邻

2）在兄弟元素之间添加一个table

高度塌陷、父子元素垂直外边距、兄弟元素垂直外边距问题都可以使用CSS的伪类来解决，这样不会向页面添加多余的元素副作用最小

四、CSS中的Hack

有些情况下，一些特殊的代码只需要在某些浏览器中执行，而在其他的浏览器中不需要执行，这时就要使用CSS Hack解决问题。CSS Hack就是指一些特殊的代码，这段代码只能在某些浏览器中识别，而在其他浏览器中不能识别，通过这种方式来为一些浏览器设置特殊的代码。

1.条件hack、

<!--  -->:只对IE浏览器有效，其它浏览器都会将它识别为注释,，IE10及以上浏览器不支持该语法，

第一个截图，如果是IE浏览器才会执行代码，才会在页面中显示；

第二张截图，内容只会在IE6中显示‘;

第三张截图，代码只会在IE8中执行;

第四张截图，在IE9以下浏览器中显示（不包括IE9 ，lte小于等于，gt大于，gte大于等于）

第五张，在除了IE6以外的其他IE浏览器中显示（注意IE10，IE11也不会显示，因为他们已经不支持跟火狐一样当成注释），

IE6中对png24格式的图片支持度不好，背景不是透明的，需要用JS代码来解决，我们希望这段代码只在IE6中运行：

在公司开发的时候不会让我们去完美兼容因为IE6、IE8存在的问题不同，只需要保证网页在IE浏览器中能够正常浏览，有些动态的效果不能显示就算了，我们就会设置两个样式表，为了兼容IE浏览器会单独再设置一个CSS的文件，

2、属性级hack

单独给IE6设置样式_background-color；给IE7及以下浏览器设置样式*background-color；

在IE8及以上的浏览器及Opera15以下的浏览器中显示，在样式后面添加\0；选择IE6以上浏览器在样式的最后面加\9;

注意：CSS Hack一般情况想尽量不要使用，维护起来比较麻烦

3、选择符级hack(使用的更少)

在选择器前 添加 * 空格

*  HTML body{}，只有IE6可以识别但是火狐和IE其他版本不能识别