您所在的位置:小祥子 » 编程 » CSS » 正文

那些年我们一起处理的浏览器兼容

时间:2015-04-21 编辑:ikeyoo 来源:本站整理

二年前,走出校门进了公司大门,成了前端工程师,有木有很拉风,听着是不是高大上…… 前台代码简单!!!!!!!!!!!门槛低!!!!!!!!!!!!! 出入高档写字楼!!!!!!!!薪水高!!!
都不想表达自己的小心脏悲伤了多久……
HTML,JSON,JS,CSS,JQUERY,,,,,有木有!
就单说这个兼容性问题,一大堆一大堆啊!这个要到IE6,那个要360,还有百度,猎豹等等等等一大堆浏览器有木有!要实现兼容有木有?
MD,xp系统都不更新了好不,换个浏览器能S啊,换个新版本接触一下新风格,看一下新世界,你会Over啊!
不说了,说多了都是泪,小可就把这两年的时间大大小小处理的一些兼容贴出来分享一下;

不得不说!鄙视IE;

1.使用clearfix类清除浮动;在需要清除浮动的位置引入该类。

.clearfix{
    display: block;
    zoom:1;        
}
.clearfix:after,.clearfix:before{/*设定一个为空的元素,用来清除元素之间的浮动,这个只能作用于对大多数符合标准的浏览器;*/
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .clearfix{height:1%;/*这是为了触发IEhaslayout*/}
.clearfix{display:block;}

2.IE6下的3像素;

有时候吧,这个IE6会莫名其妙的多出来这个几像素,这是个非常讨厌的事情,毕竟咱们精精确确算的布局到这他这里变得有点惨不忍睹!

不过使用_margin-right:-3px;就可以咯

3.IE6及更早浏览器下当li内部元素是定义了display:block的内联元素时底部产生空白

    添加:zoom:1;
    设置UL 的width

4.IE低版本PNG图片不透明解决方案;

 小 可比较懒散,所以这个PNG透明的问题还是比较喜欢使用JS来做处理的;这些JS 在网上有很多的DEMO,大家可以找找看,小可比较喜欢使用这个DD_belatedPNG.js实现。
具体的引入方式是:<!--[if IE 6]>
        <script src="css/DD_belatedPNG_0.0.8a.js" mce_src="css/DD_belatedPNG_0.0.8a.js"></script>
        <script type="text/javascript">DD_belatedPNG.fix('*');</script>
    <![endif]-->

5.img引入图片之后会有几像素的空白间隙

    可添加 img{display:block;}

6.如何设置鼠标在所有浏览器中均显示手的形状

    .p{cursor:pointer;}

7.实现已知高宽元素垂直居中;

    #div{
        position:relative;
        width:400px;
        height:400px;
        border:1px solid #f00;
        top:50%;
        left:50%;
        margin-left:-200px;
        margin-top:-200px;
    }

8.内联元素 span 高宽设置;
    span{
        display:block;
        width:200px;
        height:35px;
    }

9.超链接保留有虚线框;
    a{
        outline:none;
    }


10.设置元素透明度之后,元素内的内容也会随之变成透明状态;
    .wraper{width:200px;height:200px;background:#f00;filter:alpha(opacity=50);opacity:.5;}
.content{width:200px;height:200px;margin-top:-200px;}
<div class="wraper"></div>
<div class="content"> </div>

11.设置元素横向居中;
    #div{
    width:980px;
    margin:0px auto;
    }

12.文字垂直居中、首行缩进;
    #lh20{
    height:20px;
    line-height:20px;
    text-indent:1em;    
}

13.设置浮动之后IE出现双倍间距;
    #div{
        float:left;
        display:inline;
    }

 

关键词:浏览器 兼容