怎么处理前端开发 浏览器兼容性?

前端开发 浏览器兼容性|ie6浏览器兼容性前端开发|前端开发常见的浏览器兼容问题|web前端开发

#鄙视IE;

1.使用clearfix类清除浮动;在需要清除浮动的位置引入该类。
[code]
.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;} [/code]

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实现。
具体的引入方式是:[code]<!–[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]–> [/code]

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.设置元素透明度之后,元素内的内容也会随之变成透明状态;
[code].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>[/code]

11.设置元素横向居中;

div{

width:980px;
margin:0px auto;
}

12.文字垂直居中、首行缩进;

lh20{

height:20px;
line-height:20px;
text-indent:1em;    

}

13.设置浮动之后IE出现双倍间距;

div{

    float:left;
    display:inline;
}
前端开发 浏览器兼容性|ie6浏览器兼容性前端开发|前端开发常见的浏览器兼容问题|网站前端开发
https://www.rokub.com
» 本文来自:前端开发者 » 《怎么处理前端开发 浏览器兼容性?》
» 本文链接地址:https://www.rokub.com/3350.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!