浏览器兼容问题

主流浏览器：IE、Safari、Mozilla FireFox、Google Chrome、Opera、国产

浏览器内核及其代表作（内核：渲染引擎）

Trident: IE, 腾讯，360等国产浏览器(不开源）
Gecko: Mozilla FireFox,开源，跨平台
Presto: Opera，浏览器排版引擎，渲染速度最快
Webkit: Safari, Chrome, 开源，Safari用的是Chrome的内核原型
Blink：由Google和Opera Software开发的浏览器排版引擎

　（目前越来越多的浏览器使用双核引擎来实现）

CSS Hack: Css中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，都属于个人对CSS代码的非官方的修改，或非官方的补丁

Filter: 表示过滤器的意思，是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法，本质上讲，Filter是一种用来过滤不同浏览器的Hack类型

下划线属性过滤器：当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略这个声明，但是在IE6及更低版本的浏览器中会继续解析这个规则
!important关键字过滤器，IE6及更低版本不能识别，可以利用IE6的这个bug作为过滤器来兼容IE6和其他标准浏览器。

*属性过滤器，当在一个属性前面添加了*后，该属性只能被IE7及以下版本浏览器识别，其他浏览器忽略，语法：选择符{ *属性：属性值；}

element{
    min-height: value;
    _height: value;
}

/*   另一种实现 建议使用 */
element{
    min-height: auto;
    height: auto!important;
    height: value;
}

常见CSS Bug及Hack

IE5-8不支持opcity

opacity {
 opacity: 0.4
 filter: alpha(opacity=60); /* for IE5-7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}

没办法定义1px左右的宽度容器

　　解决：IE6 默认的行高造成的，使用overflow:hidden; zoom:0.08; line-height:1px;

图片间隙，插入图片下方会产生约3像素的间隙

　　hack1: <img>转为块状元素

　　 hack2：将img设置vertical-align：top/middle/bottom;(只要不为baseline)

双倍浮向（双倍边距）块属性标签 float 后，又有横向的margin情况下，在ie6显示margin比设置的大

　　描述：当ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界加倍显示

　　 hack：给浮动元素添加声明：_display：inline；(_这个符号只有 ie6 会识别)

3像素问题

　　使用 float 引起的使用 dislpay:inline -3px

超链接 hover 点击后失效

　　使用正确的书写顺序 link visited hover active

默认高度（IE6)

　　描述：在IE6及以下版本中，部分块元素拥有默认高度(低于16px高度）

　　 hack1：给元素添加声明：font-size：0；

　　　hack2：给元素添加声明：overflow：hidden;

百分比bug

　　描述：在IE6及以下的版本中在解析百分比时，会按四舍五入方式计算导致50%+50%>100%的情况

　　 hack：给右边的元素添加声明： clear: right;

表单元素高度及对齐方式不一致（IE，MOZ, C, O, S)

　　hack：给表单元素添加声明：float： left；或vertical-align：top;

　　表单元素中按钮的解析是按怪异盒模型来解析的

　　　直接去掉表单控件的边框时用border：0；border：none；不能兼容ie7以下浏览器

鼠标指针bug

　　cursor属性的hand属性值只有IE浏览器识别，其他浏览器不识别该声明，cursor属性为pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明

列表阶梯bug（IE6及更低）

　　bug1：在给ul的子元素中使用了float:left;父元素中没有设置浮动属性，li阶梯状效果。

　　　　hack：给父元素设置浮动便能解决

　　 bug2：当给li里的a转成块元素，并设置了固定高度时，且给父元素写了浮动后在IE6及版本浏览器里会出现垂直显示

　　　　hack：给a也设置左浮

浏览器默认的margin和padding不同。解决方案是加一个全局的 *{margin:0;padding:0;}来统一
png24的图片在iE6浏览器上出现背景，解决方案是做成 PNG8
渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“\9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将 IE8 和 IE7、IE6 分离开来，这样IE8已经独立识别。
```
css .bb{ 
    background-color:#f1ee18;/*所有识别*/
    .background-color:#00deff\9; /*IE6、7、8 识别*/ 
    +background-color:#a200ff;/*IE6、7 识别*/ 
    _background-color:#1e0bd1;/*IE6 识别*/ 
}
```
IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用 getAttribute()获取自定义属性; Firefox 下,只能使用 getAttribute()获取自定义属性解决方法:统一通过 getAttribute()获取自定义属性
IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性; Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性
Chrome中文界面下默认会将小于12px的文本强制按照12px显示, 可通过加入CSS属性 -webkit-text-size-adjust: none; 解决

posted @ 2020-04-13 15:43 JettWoo 阅读(172) 评论(0) 编辑收藏举报

刷新页面返回顶部

JettWoo

浏览器兼容问题

公告