如何调试 iPhone Safari 浏览器的CSS兼容问题

html-css08

如何调试 iPhone Safari 浏览器的CSS兼容问题,第1张

Bug调试

1:doctype没声明,带来的IE浏览器盒模型解析bug

解决: 进行xhtml 正确声明,如strict声明

2:浏览器的初始值不同带来的.

解决:进行css初始化.

3:自身代码不规范带来的bug,

解决:面壁

4:浏览器的bug带来的.

4.1 IE6, 有双倍margin bug

是指:浮动方向上的margin值会加倍.

例如: 某元素 float:leftmargin-left的值是10px, 那么页面上会解析为20px

同时 ,float:right, margin-right也会加倍

解决方案: 设置漂浮元素的_display:inline

4.2: 3像素bug,

解决:规范float的用法

4.3: IE关于a标签的4个伪类的兼容bug

答:对于IE, 如果a:link方式声明了标签的样式

可能会引来 visited伪类的解析异常

解决: 去掉a:link,以 a 来代替

Bug调试

1:doctype没声明,带来的IE浏览器盒模型解析bug

解决: 进行xhtml 正确声明,如strict声明

2:浏览器的初始值不同带来的.

解决:进行css初始化.

3:自身代码不规范带来的bug,

解决:面壁

4:浏览器的bug带来的.

4.1 IE6, 有双倍margin bug

是指:浮动方向上的margin值会加倍.

例如: 某元素 float:leftmargin-left的值是10px, 那么页面上会解析为20px

同时 ,float:right, margin-right也会加倍

解决方案: 设置漂浮元素的_display:inline

4.2: 3像素bug,

解决:规范float的用法

4.3: IE关于a标签的4个伪类的兼容bug

答:对于IE, 如果a:link方式声明了标签的样式

可能会引来 visited伪类的解析异常

解决: 去掉a:link,以 a 来代替

你写的下面的那个css选择器中间没有加空格,代表的是同时拥有class为ucenter-left和class为ucenter-l-header的元素,举例:

<div class="ucenter-left ucenter-l-header"></div>