浏览器兼容

Posted 2020-11-28 imbacool

浏览器五大内核

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；