码迷,mamicode.com
首页 > 其他好文 > 详细

浏览器兼容性问题汇总

时间:2018-08-29 14:29:08      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:overflow   direction   解析   其他   不同的   冲突   出现   font   put   

1、css3   box-shadow 对于不同的浏览器,兼容问题的解决办法:
.box_shadow{ 
 
filter: progid:DXImageTransform.Microsoft.Shadow(color=‘#969696‘, Direction=135, Strength=5);/*for ie6,7,8*/ 
-moz-box-shadow:2px 2px 5px #969696;/*firefox*/ 
-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/ 
box-shadow:2px 2px 5px #969696;/*opera或ie9*/ 
}

2、各个浏览器之间显示字体不一致的解决办法
统一设置全局字体:
body{font-family: ‘微软雅黑‘;}

3、去掉谷歌浏览器输入框内自带黄色背景
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}

4、去掉IE浏览器中输入框右边的小图标(叉号和眼睛)
 ::-ms-clear, ::-ms-reveal{display: none;}

5、去掉谷歌浏览器下输入框自带边框
 .class{outline:none}  
6、禁止表单的自动填充功能

autocomplete=”off”。
7、取消chrome下textarea可拖动放大
textarea{resize:none}

8、标签最低高度 min-height不兼容

因为min-height本身就是一个不兼容的css属性,所以正确的做法是:{min-height:200px; height:auto !important; height:200px; overflow:visible;}

9、 /* CSS hack*/ 

使用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。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的

10、不同浏览器默认的内边距和外边距不同

*{margin:0;padding:0;}

11、div用float布局后并且设置了margin属性的情况下,在ie6下margin比设置的要大

在float样式中加入display:inline;将其转化为行内元素

12、当给标签设置高度小于10px时,IE6,IE7,遨游高度会超出设置高度

给标签设置overflow:hidden;或者把line-height设置成小于本来要设置的高度(这个问题的原因是IE8之前的浏览器都会给一个默认的行高)

13、行内元素设置了display:block;后又用float布局并且设置了margin的情况下,ie6间距bug问题

在display:block;后加display:inline;display:table;

14、多个<img>放在同一行时,有些浏览器会出现图片之间有间隙的情况,加了通配符设置也不起作用

使用float为img布局

浏览器兼容性问题汇总

标签:overflow   direction   解析   其他   不同的   冲突   出现   font   put   

原文地址:https://www.cnblogs.com/yuner-angel/p/9552417.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!