解决各浏览器存在的兼容问题

1.问题:png24 位的图片在 iE6 浏览器上出现背景
解决:解决方案是做成 PNG8


2.问题:浏览器默认的 margin 和 padding 不同。
解决:方案是加一个全局的 *{margin:0;padding:0;} 来统一。


3.问题:IE6 双边距 bug,浮动后产生的双倍距离:块属性标签 float 后,又有横行的 margin 情况下,在ie6 显示 margin 比设置的大
解决:是在 float 的标签样式控制中加入 display:inline; 将其转化为行内属性;


4.问题:IE 下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute() 获取自定义属性,Firefox 下,只能使用 getAttribute() 获取自定义属性.
解决:解决方法:统一通过 getAttribute() 获取自定义属性.


5.问题:IE 下, even 对象有 x , y 属性,但是没有 pageX , pageY 属性,Firefox 下, event 对象有pageX , pageY 属性,但是没有 x , y 属性.
解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的 HTTP 请求数。


6.问题:Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,.
解决:可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.


7.问题:超链接访问过后 hover 样式就不出现了 , 被点击访问过的超链接样式不在具有 hover 和active 了
解决:方法是改变 CSS 属性的排列顺序 : L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}


8.设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度
问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度
解决方案:给超出高度的标签设置 overflow:hidden; 或者设置行高 line-height 小于你设置的高度。


9.行内属性标签,设置 display:block 后采用 float 布局,又有横行的 margin 的情况,IE6 间距 bug
问题症状:IE6 里的间距比超过设置的间距
解决方案:在 display:block; 后面加入 display:inline; display:table;


10.图片默认有间距
问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。
解决方案:使用 float 属性为 img 布局


11.标签最低高度设置 min-height 不兼容
问题症状:因为 min-height 本身就是一个不兼容的 CSS 属性,所以设置 min-height 时不能很好的被各个浏览器兼容
解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:

{
   min-height:200px;
   height:auto !important; 
   height:200px; 
   overflow:visible;
}


  1. 透明度的兼容CSS设置

做兼容页面的方法是:每写一小段代码(布局中的一行或者一块)我们都要在不同的浏览器中看是否兼容,当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的,只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话,就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

/* CSS hack*/

我很少使用hacker的,可能是个人习惯吧,我不喜欢写的代码IE不兼容,然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类:IE6 ;IE7和遨游;其他(IE8 chrome ff safari opera等)

IE6认识的hacker 是下划线_ 和星号 *

IE7 遨游认识的hacker是星号 *

比如这样一个CSS设置:

height:300px;*height:200px;_height:100px; 

IE6浏览器在读到height:300px的时候会认为高时300px;继续往下读,他也认识heihgt, 所以当IE6读到height:200px的时候会覆盖掉前一条的相冲突设置,认为高度是200px。继续往下读,IE6还认识_height,所以他又会覆盖掉200px高的设置,把高度设置为100px;

IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了,因为它们不认识_height。所以它们会把高度解析为200px,剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的。


13:不同浏览器的标签默认的外补丁和内补丁不同

问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
碰到频率:100%
解决方案:CSS里 *{margin:0;padding:0;}
备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

发布了103 篇原创文章 · 获赞 19 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/M106588L/article/details/101102135