如何解决浏览器兼容性问题

介绍

这篇文章给大家分享的是有关如何解决浏览器兼容性问题的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

<强>一、铬下会让小于12 px的文本字体默认为12 px显示,让chrome支持小于12 px的字体

盒{字体大小:8 px;-webkit-text-size-adjust:没有;}

但是,上面这个方法chrome27以后就不能用了。但我们可以用css3解决这个问题

盒{字体大小:12 px;-webkit-transform:规模(0.75);}

<强>二,不同浏览器的标签默认的外补丁和内补丁不同,随便写几个标签,不加样式控制的情况下,各自的保证金和填充差异较大,碰到频率:100%

解决方案:

*{保证金:0;填充:0;}

备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的css文件开头都会用通配符来设置各个标签的内外补丁是0。

<强>三,设置较小高度标签(一般小于10 px),在ie6, ie7,遨游中高度超出自己设置高度

问题症状:ie6, 7和遨游里这个标签的高度不受控制,超出自己设置的高度

碰到频率:60%

<强>解决方案:给超出高度的标签设置溢出:隐藏,或者设置行高行高小于你设置的高度。

备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

<强>四、图片默认有间距

问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加上问题一中提到的通配符也不起作用。

碰到几率:20%

<>强解决方案:使用浮动属性为img布局

备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用浮动是正道

<强>五、标签最低高度设置最低高度不兼容

问题症状:因为最小高度本身就是一个不兼容的css属性,所以设置最低高度时不能很好的被各个浏览器兼容

碰到几率:5%

解决方案:如果我们要设置一个标签的最小高度200 px,需要进行的设置为:

{最低高度:200 px;高度:汽车!重要;身高:200 px;溢出:可见;}

备注:在B/S系统前端开时,有很多情况下我们有这种需求。当内容小于一个值(如300 px)时。容器的高度为300 px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

<强>六,const问题

说明:Firefox下,可以使用常量关键字或var关键字来定义常量;

IE下,只能使用var关键字来定义常量。

<强>解决方法:统一使用var关键字来定义常量。

<强>七。window.location.href问题

说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;

Firefox1.5.x下,只能使用window.location。

<>强解决方法:使用window.location来代替window.location.href。

<强>八、ul和ol列表缩进问题

消除ul、ol等列表的缩进时,样式应写成:

list-style:没有,保证金:0 px;填充:0 px;

经验证,在IE中,设置保证金:0 px可以去除列表的上下左右缩进,空白以及列表编号或圆点,设置填充对样式没有影响;在Firefox中,设置保证金:0 px仅仅可以去除上下的空白,设置填充:0 px后仅仅可以去掉左右缩进,还必须设置清单——风格:才没有能去除列表编号或圆点。也就是说,在IE中仅仅设置保证金:0 px即可达到最终效果,而在Firefox中必须同时设置保证金:0 px,填充:0 px以及list-style:没有三项才能达到最终效果。

<强>九,即与宽度和高度的问题

IE不认得最小,这个定义,但实际上它把正常的宽度和高度当作有分钟的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和最小高度的话,IE下面根本等于没有设置宽度和高度。

比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:

盒子{宽度:80 px;高度:35 px;} html>身体#箱{宽度:汽车;高度:汽车;min-width: 80 px;最小高度:35 px;}

<强>十,页面的最小宽度

如上一个问题,即不识别分,要实现最小宽度,可用下面的方法:

如何解决浏览器兼容性问题