css hack 浏览器兼容

浮动的元素必须有宽和高

1、css hack

1.css条件注释法
<!--[if IE 7]>
    <style type="text/css">
        h2{color:red;}}
    </style>
<![endif]-->

2、表示范围的代码：

    gt：大于
    gte：大于等于
    lt：小于
    lte：小于等于
    ！：不等于

3.css选择符hack

    *html .class{样式}        ie6选择器
    *+html .class{样式}       ie7

3.css属性hack

    .myh2{_color:red;}      ie6
    .myh2{*+color:red;}     ie7
    .myh2{*color:red;}      ie6/ie7
    .myh2{color:red\0;}     ie8/ie9
    .myh2{color:red\9;}     ie6-ie9
    .myh2{color:red\9\0;}   ie9/ie10/ie11

4.!important

    理论上IE6不认识，火狐认识
    比行内样式表优先级高

5.css3新增的属性

    —moz—       firefox  火狐
    —o—         opera  欧鹏
    —ms—        IE  微软浏览器
    —webkit—    safari、chrome    苹果   和  谷歌

6、 常见bug及解决方案

1.图片引起的bug
    1.图片放在一个父元素中，给父元素加边框，图片下边距父元素会有一个空隙
        解决方案：给img加一个属性，或者两种都写
            img{display：block；}
            img{vertical-align：middle(chorme浏览器边框被覆盖，加图片的高度可以解决)或者top}
    
    2.换行插入img标签，图片之间会产生间隙
        解决方案：加浮动或者不换行
        
    3.给图片加超链接之后，会自带2像素边框(IE)
        解决方案：img{boder:none;}
        
    4.给图片加超链接之后，鼠标放上去边框变色(IE)
        <a href="#"><img src=""></a>
        给a标签加边框  ：hover也给a加，并把a标签变成块级元素，加宽和高。
        其他浏览器可以直接给img:hover
    
    5.图片与其它标签不对其
        解决方案;img{vertical-align：middle}
        
2.间距问题
    1.默认的时候浏览器的间距不一样
        解决方案：*{margin:0; padding:0;}
        
    2.块级元素，上下外边距取最大值，左右边距叠加
      行内元素，上下外边距不起作用，左右边距叠加
      行内块级元素，上下边距叠加
      
    3.给子元素加上边距，会把上边距加给父元素
        解决方案：给父元素加padding:0.1px;
        
    4.ie6 块级元素居中对齐的时候margin:0 auto;对ie6不起作用；
        解决方案：在body{
                            text-align:center;
                        }
                        
    5.ie6双边距问题：一个左浮的元素又加了margin-left:10px;会产生20px间距
        解决方案：display:inline；
        
    6.ie6经典三像素：一个元素浮动了，另一个元素没浮动，两元素之间会产生3px的距离
        解决方案：两个都浮动。
        
3.其他问题
    1.ie6不透明度
        opacity:0.5;
        filter；alpha(opacity=20);
    2.鼠标手：
        cursor:pointer;
    3.最小高度
        ie6文字溢出自动撑开
        其他浏览器加
            _height:xxpx;
            min-height；xxpx；
    4.一行文本垂直居中
        用line-height:;

7、三角的制作：

width:0px;
height:0px;
border:10px solid red;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
border-right:10px solid transparent;