视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
那些年我们一起处理的浏览器兼容_html/css
2020-11-27 16:04:36 责编:小采
文档


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

不得不说![b][size=7][color=Yellow]鄙视[/color][/size][/b]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,大家可以找找看,小可比较喜欢使用这个[url=http://www.dillerdesign.com /experiment/DD_belatedPNG/]DD_belatedPNG.js[/url]实现。
具体的引入方式是:

DD_belatedPNG.fix('*');

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;}

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

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

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

下载本文
显示全文
专题