现在的位置: 首页 > 综合 > 正文

div+css IE 6,7,8兼容的一个实例

2012年04月30日 ⁄ 综合 ⁄ 共 1192字 ⁄ 字号 评论关闭

===========解决ie6 与ie8的padding问题==========
一开始我一直以为ie6加了padding显示的width=width+pading 其实不是,找了资料 ie下都不会的
如果这样你就要检查的css设置
看我的:
前台代码:
<asp:Repeater ID="rpt_zzjs" runat="server">
<HeaderTemplate><ul class="ul_con"></HeaderTemplate>
<ItemTemplate><li><a href="<%# GetRequst.GetRequsetQuerystring("vid")%>/content/<%# Eval("id")%>.do">· <%# Common.GetLeftstring(Eval("title").ToString(),22)%></a></li></ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

原css代码
.ul_con li { line-height:170%; float:left; width:100%;_width:100%; text-align:left; font-size:13px; border-bottom:solid 1px #ececec; background-image: url('/village/content/icon/title.gif');background-repeat: no-repeat;background-position:left center; padding-left:10px;float:left; POSITION: relative;}

ie7,8下没问题,ie6下 ul表的总宽度增长了10px,界面难看死了。开始以ie6下会加上他的pading值。找了资料都说不会加的,只有firefox下才会加的。
冥思苦想后,原来我这个在ie6下 显示的宽度是 li的padding+a的width=10+100%难怪会增加。现在我把padding写在a里面 问题解决
代码如下:
.ul_con li { line-height:170%; float:left; width:100%;_width:100%; text-align:left; font-size:13px; border-bottom:solid 1px #ececec; }
.ul_con li a{background-image: url('/village/content/icon/title.gif');background-repeat: no-repeat;background-position:left center; padding-left:10px;float:left; POSITION: relative;}

抱歉!评论已关闭.