如何处理ipad safari CSS 样式的兼容性？

kinghome 2012-02-09 03:00:47

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

以下为布局
<div id="roleArea">
<div class="boxLeft"><img src="codebase/bot/images/web/bar_headerLeft.png" /></div>
<div class="boxMiddle">
<ul>
<li> <img src="codebase/bot/images/web/icon_chatbtn.png" id="chatIcon" /> </li>
<li><span><b>Role</b></span> <asp:Label ID="LabUserRole" runat="server" Text="Label" ToolTip="click here to change role"></asp:Label></li>
<li><span><b>User</b></span> <asp:Label ID="LabUserName" runat="server" Text="Label"></asp:Label> </li>
</ul>
</div>
<div class="boxRight"><img src="codebase/bot/images/web/bar_headerRight.png" /></div>
</div>

...全文

937 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

ertl420 2013-09-13

打赏
举报

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

kinghome 2012-02-09

打赏
举报

应要求补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:#006495}