前端开发之初探三

Posted 2020-11-08 vmanas

浏览器兼容

1、CSS Bug、CSS Hack和Filter

1）、CSS Bug:CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.

2）、CSS Hack: CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为它们都属于个人对CSS代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。

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

*使用Hack带来的一些副作用

降低了CSS代码的可读性，增加了代码的负担。

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

1）、一种是利用浏览器自身的Bug，来隐藏或显示样式或声明；

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

2、IE6常见CSS解析Bug及hack

1）、图片间隙

A)div中的图片间隙(该bug出现在IE6及更低版本中)

描述：在div中插入图片时，图片会将div下方撑大三像素。 

hack1:将<div>与<img>写在一行上；

hack2:将<img>转为块状元素，给<img>添加声明：display:block;

B)dt,li中图片间隙（IE6）

hack:添加声明：overflow:hidden;

2）、默认高度（IE6）

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

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

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

3）、双倍浮向（双倍边距）

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

hack:给浮动元素添加声明：display:inline;

 4）、表单元素行高不一致(IE,MOZ,C,O,S)

描述：表单元素行高对齐方式不一致

hack:给表单元素添加声明：float:left;

5）、按钮元素默认大小不一

描述：各浏览器中按钮元素大小不一致

hack1： 统一大小/（用a标记模拟）

hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框 和背景色掉去。

hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。

 6）、百分比bug

描述：IE浏览器在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。

hack:给右面的浮动元素添加声明：clear:right;     意思：清除右浮动。     

clear:left:清除左浮动

clear:both:清除两边的浮动

7）、鼠标指针bug

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

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

8）、透明属性

IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100

兼容其他浏览器写法：opacity:.value;(value的取值范围0-9;0.1,0.2,0.3-----0.9)

FF及其他浏览器兼容问题

1)透明属性兼容

opacity:.value;

9）、过滤器(filter)

下划线属性过滤器
    当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。

语法：选择符{_属性：属性值；}

语法：选择符{*属性：属性值；}(IE7以下) 

!important关键字过滤器
它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它，我们可以利用IE6的这个Bug作为过滤器来兼容IE6和其它标准浏览器。

语法：选择符{属性：属性值!important;}

10）、png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

11）、浏览器默认的margin和padding不同。解决方案是加一个全局{margin:0;padding:0;}来统一。

    12）、 IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 

      浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;} 

     这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

      渐进识别的方式，从总体中逐渐排除局部。 

      首先，巧妙的使用“\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识别*/

          } 

13）、 IE下,可以使用获取常规属性的方法来获取自定义属性,

       也可以使用getAttribute()获取自定义属性;

       Firefox下,只能使用getAttribute()获取自定义属性. 

       解决方法:统一通过getAttribute()获取自定义属性.

14）、 IE下,even对象有x,y属性,但是没有pageX,pageY属性; 

      Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

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

16）、超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:

    L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}