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

发布网友

我来回答

共2个回答

懂视网

如上图【由三个DIV组成的圆角框，中间DIV 两端出现了间隙】主流PC浏览器都能显示正确的效果，唯独IPAD Safari 出现这样的差异。不清楚是什么原因造成的，知道的朋友指教。

以下为布局

回复讨论(解决方案)

这样能看出什么啊。。。没css也没办法测试

应要求补CSS
#roleArea
{
height:39px; width:auto;
overflow:hidden;
float:left;
margin-top:10px;
margin-bottom:10px;

}
#roleArea div
{
height:39px;
overflow:hidden;
padding:0;
width:auto;
float:left;
margin:0;
}
#roleArea div.boxMiddle
{
background:url("../images/web/bar_headerMiddle.png");
background-repeat:repeat-x;
}
#roleArea div.boxLeft,#roleArea div.boxRight{ width:20px;}
#roleArea ul
{
list-style:none;
margin:0 auto;
padding:0;
display:block; width:100%; overflow:hidden;

}
#roleArea ul li{ float:left; height:39px; overflow:hidden;}

#roleArea ul li span
{
float:left;
height:39px;
line-height:39px;
color:#666;
}
#roleArea ul li span b{color:#0095}

你在样式里加个 img{border:0px}试试

热心网友

Bug调试

1:doctype没声明,带来的IE浏览器盒模型解析bug
解决: 进行xhtml 正确声明,如strict声明

2:浏览器的初始值不同带来的.
解决:进行css初始化.

3:自身代码不规范带来的bug,
解决:面壁

4:浏览器的bug带来的.

4.1 IE6, 有双倍margin bug
是指:浮动方向上的margin值会加倍.
例如: 某元素 float:left; margin-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 来代替