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

浏览器兼容

时间:2020-02-29 22:36:18      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:腾讯   css   意思   显示   ack   pre   ali   lte   hack   

浏览器五大内核

1、Trident(IE内核)
IE、遨游、腾讯、世界之窗、360
代表作品:IE(此内核只适用于windows)

2、Gecko(火狐内核)
代表作品:firefox(开源且跨平台)

3、Webkit
代表作品:chrome(谷歌-前期)、safari(苹果)开源

4、Presto
代表作品:opera(欧朋-前期)
渲染速度最快引擎(已废弃)

5、Blink
代表作品:谷歌(后期)、欧朋(后期)

CSS bug
CSS样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug(漏洞).

解决方法
1、CSS hack
CSS中,Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法(降低了CSS代码的可读性,增加了代码的负担。

2、Filter
表示过滤器的意思,本质上讲,Filter是一种用来过滤不同浏览器的Hack类型。

设计CSS Hack和 Filter通常有两种方法:

1)一种是利用浏览器自身的Bug,来隐藏或显示样式或声明;

2)另一种是利用浏览器对CSS支持的不完善,如对某些规则或语法还没有形成支持,来隐藏或显示样式。

常见BUG及hack

1)图片有边框BUG(ie8及以下)
描述:当图片加<a href=“#”></a>在IE上会出现边框
Hack: 给图片加 border: 0 none;

2)图片间隙(IE6)
div中的图片间隙BUG
描述:在div中插入图片时,图片会将div下方撑大大约三像素
hack1:将div的字体大小设成0;
hack2:将<img>转为块状元素,给<img>添加声明:display:block;

3) 双倍浮向(双倍边距)(只有IE6出现)
描述:当Ie6及更低版本浏览器在解析浮动元素时,会错误地把浮向边边界(margin)加倍显示。
hack:给浮动元素添加声明 display:inline;

4)默认高度(IE6、IE7)
描述:在IE6及以下版本中,部分块元素拥有默认高度(在16px左右;)
hack1:给元素添加声明:font-size:0;
hack2:给元素添加声明:overflow:hidden;

5)表单元素行高对齐不一致(各浏览器都有)
描述:表单元素行高对齐方式不一致
hack1:给表单元素添加声明:float:left;
hack2:给表单元素添加声明:vertical-align:middle;

6)按钮元素默认大小不一(各浏览器都有)
描述:各浏览器中按钮元素大小不一致
hack1:input外边套一个标签,在这个标签里写input的样式,把input的边框去掉,默认padding也要去掉,display:block。
hack2:用a标签模拟

7)百分比bug(IE6)
描述:在IE6及以下版本中在解析百分比时,会按四舍五入方式计算从而导致50%加50%大于100%的情况。(也会受系统影响)

hack: 给右边的浮动元素添加声明:
clear:right; 清除右浮动

8)鼠标指针bug(手型就写pointer)
描述: cursor属性的hand属性值只有IE9以下浏览器识别,其它浏览器不识别该声明
cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明

hack: 如统一某元素鼠标指针形状为手型,应添加声明:cursor:pointer;

鼠标指针语法
cursor:auto 默认
crosshair 加号
text 文本
wait 等待
help 帮助
progress 过程
inherit 继承
move 移动
ne-resize 向上或向右移动
pointer 手形

9)透明属性
兼容其他浏览器写法 opacity:value; (value的取值范围0-1)
例:opacity:0.5;

IE浏览器写法 filter:alpha(opacity=value); 取值范围 0-100(整数)
例:filter:alpha(opacity=50);

10)margin塌陷

当前元素(父元素里面第一个子元素)与父元素没有设置任何浮动的情况下,设置margin-top后,会错误的把margin-top加在父级元素上

hack1、给父级元素添加overflow:hidden;(推荐使用)
hack2、给父元素或者子元素加浮动

11)margin合并BUG
当两个上下排列的元素,上元素有margin-bottom:30px;下面元素有margin-top:20px;他们中间的距离不会叠加,而是会设置为较大的值
hack 给上边盒子外层加一个空盒子,加overflow:hidden;

浏览器兼容

标签:腾讯   css   意思   显示   ack   pre   ali   lte   hack   

原文地址:https://www.cnblogs.com/imbacool/p/12386249.html

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