浏览器兼容性大全.docx
- 文档编号:9172770
- 上传时间:2023-02-03
- 格式:DOCX
- 页数:30
- 大小:25.69KB
浏览器兼容性大全.docx
《浏览器兼容性大全.docx》由会员分享,可在线阅读,更多相关《浏览器兼容性大全.docx(30页珍藏版)》请在冰豆网上搜索。
浏览器兼容性大全
浏览器兼容性
浏览器的内核
MozillaFirefox(Gecko)
InternetExplorer(Trident)
Opera(Presto)
Safari(WebKit)
GoogleChrome(WebKit)
腾讯TT、世界之窗、360浏览器、遨游浏览器都是给IE加了个外壳,不过如果电脑上装的是ie8的话,这些浏览器还是调用ie7的内核。
搜狗浏览器比较特殊,它有两种浏览模式:
一是兼容模式,该模式使用IE内核;二是高速模式,该模式使用WebKit内核。
解决ie7、ie8兼容性最好的办法是在head标签中加入meta类型
CSSHack
解决浏览器兼容性问题的主要方法是CSShack。
由于不同的浏览器,比如InternetExplorer6,InternetExplorer7,MozillaFirefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSScode的过程,就叫CSShack,也叫写CSShack。
CSSHack的原理是什么
由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。
我们就可以根据这个来针对不同的浏览器来写不同的CSS。
比如IE6能识别下划线"_"和星号"*",IE7能识别星号"*",但不能识别下划线"_",而firefox两个都不能认识。
等等
各浏览器CSShack兼容表:
IE6
IE7
IE8
Firefox
Opera
Safari
!
important
Y
Y
Y
Y
Y
_
Y
*
Y
Y
*+
Y
\9
Y
Y
Y
\0
Y
nth-of-type
(1)
Y
Y
如何解决浏览器的兼容性
在head标签中加入meta类型
现在剩下ie6、ie7、Firefox、Chrome(Safari与Chrome使用同一内核)、Opera这几种浏览器的兼容性问题,我们需要使用CSSHack来解决该问题。
代码如下所示:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
.t1
{
color:
#000000;/*所有浏览器都支持此处填写Firefox的css*/
*color:
#0000FF;/*ie6id7支持此处填写ie7的css*/
_color:
#66CCCC;/*ie6支持 此处填写ie6的css*/
}
@mediaalland(-webkit-min-device-pixel-ratio:
10000),notalland(-webkit-min-device-pixel-ratio:
0)
{.t1{color:
#9900FF}}/*oprea支持 此处填写oprea的css*/
@mediascreenand(-webkit-min-device-pixel-ratio:
0)
{
.t1{color:
#336600}/*Chrome、Safari支持 此处填写Chrome的css*/
}
.t1{
color:
#000000;/*所有浏览器都支持此处填写Firefox的css**/
*color:
#0000FF;/*ie6id7支持此处填写ie7的css*/
_color:
#66CCCC;/*ie6支持 此处填写ie6的css*/
}
/*oprea支持此处填写oprea的css*/
@mediaalland(-webkit-min-device-pixel-ratio:
10000),notalland(-webkit-min-device-pixel-ratio:
0)
{.t1{color:
#CC66FF}}
/*Chrome、Safari支持此处填写Chrome的css*/
@mediascreenand(-webkit-min-device-pixel-ratio:
0)
{
.t1{color:
#336600}}
}
常见的浏览器兼容问题
Css样式是与DOCTYPE引入的W3C//DTD有关的,不同的dtd对css的解析也不同,我们现在统一使用
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
css兼容问题:
1.默认的内外边距不同
问题:
各个浏览器默认的内外边距不同
解决:
*{margin:
0;padding:
0;}
2.水平居中的问题
问题:
设置text-align:
center
ie6-7文本居中,嵌套的块元素也会居中
ff/opera/safari/ie8文本会居中,嵌套块不会居中
解决:
块元素设置
1、margin-left:
auto;margin-right:
auto
2、margin:
0auto;
3、
3.垂直居中的问题
问题:
在浏览器中想要垂直居中,设置vertical-align:
middle;不起作用。
例如:
ie6下文本与文本输入框对不齐,需设置vertical-align:
middle1,但是文本框的内容不会垂直居中
解决:
给容器设置一个与其高度相同的行高
line-height:
与容器的height一样
4.关于高度问题
问题:
如果是动态地添加内容,高度最好不要定义。
浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。
如果设定了高度,内容过多时,ie6下会自动增加高度、其他浏览器会超出边框
解决:
1.设置overflow:
hidden;
2.高度自增height:
auto!
important;height:
100px;
5.IE6默认的div高度
问题:
ie6默认div高度为一个字体显示的高度,所在ie6下div的高度大于等于一个字的高度,因此在ie6下定义高度为1px的容器,显示的是一个字体的高度
解决:
为这个容器设置下列属性之一
1、设置overflow:
hidden;
2、设置line-height:
1px;
3、设置zoom:
0.08
6.IE6最小高度(宽度)的问题
问题:
ie6不支持min-height、min-width属性,默认height是最小高度,width是最小宽度。
解决:
使用ie6不支持但其余浏览器支持的属性!
important。
设置属性min-height:
200px;height:
auto!
important;height:
200px;
7.td高度的问题
问题:
table中td的宽度都不包含border的宽度,但是oprea和ff中td的高度包含了border的高度
解决:
设置line-height和height一样。
在ie中如果td中的没有内容,那么border将不会显示
8.div嵌套p时,出现空白行
问题:
div中显示
文本
,ff、oprea、Chrome:top和bottom都会出现空白行,但是在ie下不会出现空白行。
解决:
设置p的margin:
0px,再设置div的padding-top和padding-bottom
9.IE6-7图片下面有空隙的问题
问题:
块元素中含有图片时,ie6-7中会出现图片下有空隙
解决:
1、在源代码中让
2、将图片转换为块级对象display:
block;
3、设置图片的垂直对齐方式 vertical-align:
top/middle/bottom
4、改变父对象的属性,如果父对象的宽、高固定,图片大小随父对象而定,那么可以对父元素设置:
overflow:
hidden;
5、设置图片的浮动属性 float:
left;
10.IE6双倍边距的问题
问题:
ie6中设置浮动,同时又设置margin时,会出现双倍边距的问题
例float:
left;width:
100px;margin:
0100px;
解决:
设置display:
inline;
11.IE6weidth为奇数,右边多出1px的问题
问题:
父级元素采用相对定位,且宽度设置为奇数时,子元素采用绝对定位,在ie6中会出现右侧多出1像素
解决:
将宽度的奇数值改成偶数
12.IE6两个层之间3px的问题
问题:
左边层采用浮动,右边没有采用浮动,这时在ie6中两层之间就会产生3像素的间距
解决:
1、右边层也采用浮动 float
2、左边层添加属性 margin-right:
-3px;
13.IE6子元素绝对定位的问题
问题:
父级元素使用padding后,子元素使用绝对定位,不能精确定位
解决:
在子元素中设置 _left:
-20px;_top:
-1px;
14.显示手型cursor:
hand
问题:
ie6/7/8、opera 都支持 但是safari、ff不支持
解决:
写成cursor:
pointer; (所有浏览器都能识别)
15.IE6-7line-height失效的问题
问题:
在ie中img与文字放一起时,line-height不起作用
解决:
都设置成float
16.td自动换行的问题
问题:
Table宽度固定,td自动换行
解决:
设置Table的table-layout:
fixed,td的word-wrap:
break-word
17.子容器浮动后,父容器扩展问题
问题:
子容器都float以后,父容器没有设定高度,父容器将不会扩展
解决:
只需要添加一个clear:
both的div,代码如下:
1pxsolid#333;width: 204px"> 100px;border: 1pxsolid#333;float: left;">子容器a