ie6下多个a标签折行bug

来源：互联网发布：glpi windows 编辑：程序博客网时间：2024/05/17 22:48

今天遇到一个问题，是ie6下面的bug，有几个a标签设定block浮动后，最后一个没有包含在div内，

先看我的html结构：

 <div class="lsjs_rightstu">   <a class="lsjs_rightstua" href="#"><imgsrc="style/images/q1.jpg" /></a>   <a class="lsjs_rightstua" href="#"><imgsrc="style/images/q2.jpg" /></a>   <a class="lsjs_rightstua" href="#"><imgsrc="style/images/q3.jpg" /></a>   <a class="lsjs_rightstua" href="#"><imgsrc="style/images/q4.jpg" /></a> </div>

css代码：

.lsjs_rightstu{ height:109px; width:896px;background:#000; overflow:hidden;}.lsjs_rightstua{ display:block; float:left;width:224px; height:109px; overflow:hidden;}.lsjs_rightstu img{ width:224px;height:109px;}

具体如下图：

最后一张会掉出外面，被隐藏掉

明明div宽度就是四个a标签的总和，测试了好久，突然想起来来以前处理的a标签和span标签写在html里头，连续几个标签采用折行写法的时候ie6会有空白bug，这又去百度找了好久，使用inline-block啊，font-size:0啊等等，都没办法解决，想了好久都想不通。尝试了很多办法都没解决，最后把ie6浮动的去掉变成inline竟然可以了，总结了下，共有以下几种办法可行

方案1：标签头尾相接，如下：

</div>

完美解决，但是html代码不美观，维护性不好，当然如果这里是固定的后期不会在有拓展，那这种还是比较简单明了的办法

方案2：在ie6下a标签inline化，不要float，然后img又block，左float化，神奇的竟然可以了，这是我在测试好久发现可以的，但是不知道是不是符合w3c的写法标准，所以这个只能pass掉了

.lsjs_rightstu{ height:109px; width:896px;background:#000; overflow:hidden;}

.lsjs_rightstua{ display:block; float:left;_display:inline; _float:none; width:224px; height:109px; overflow:hidden;}

.lsjs_rightstua img{ display:block;float:left; width:224px; height:109px;}

方案3：将a标签包含在div块内，div左float化，a标签block化就好了

<divclass="aa"><a class="lsjs_rightstua"href="#"><img src="style/images/q1.jpg"/></a></div>

<divclass="aa"><a class="lsjs_rightstua"href="#"><img src="style/images/q2.jpg"/></a></div>

<divclass="aa"><a class="lsjs_rightstua"href="#"><img src="style/images/q3.jpg"/></a></div>

<divclass="aa"><a class="lsjs_rightstua"href="#"><img src="style/images/q4.jpg"/></a></div>

</div>

.aa{ float:left; width:224px;height:109px;}

.aa a{ display:block; width:224px;height:109px;}

我个人觉得这种方法比较好，虽然html比较累赘，但是看着也舒服，后期拓展加上文字描述之类的方便，我比较想不透的是为什么a标签block化，没办法达到效果。

方案4：针对ie6使用负margin写hack解决，但是这种一个不好就是最后一张图片背景色必须是有规律的，然后把父元素的背景色调整为最后一张图的颜色，或者渐变背景，如下：

.lsjs_rightstu{ height:109px; width:896px; background:#f2f2f2;}

.lsjs_rightstua{ display:block;float:left; width:224px; height:109px;overflow:hidden;_margin-left:-1px;}

.lsjs_rightstua img{ width:224px; height:109px;}

最终表现完美，如下图：

目前就知道这几种方案，不知道还有没有其他可以又符合标准写法的，如果你也知道请留言告知下哦~

========================================================================================

ps：对于inline和inline-block的测试，网上说的inline-block的兼容我又测试了下，发现确实是可行，就是只有包裹img标签的不可行，包裹span标签都能成功，很有可能img还有其他的bug也说不定。。

如下html和css代码：

    <ul class="t1">        <li>11111</li><li>333lili33</li>        <li>22222</li>    </ul>    <ul class="t2">        <li>44444</li><li>555lili55</li>        <li>66666</li>    </ul>    <div class="ta">        <a href="a">11111</a><a href="a">22aaaa222</a>        <a href="a">33333</a>    </div>    <div class="tspan">        <span>11111</span><span>22span222</span>        <span>33333</span>    </div><div class="lsjs_rightstu">    <a class="lsjs_rightstua" href="#"><img src="style/images/q1.jpg" /></a>    <a class="lsjs_rightstua" href="#"><img src="style/images/q2.jpg" /></a>    <a class="lsjs_rightstua" href="#"><img src="style/images/q3.jpg" /></a>    <a class="lsjs_rightstua" href="#"><img src="style/images/q4.jpg" /></a></div><ul class="t3">        <li><span>3232</span></li><li><span>2222</span></li>        <li>2<span>1111</span></li></ul>

css：

/*YUI 3.18.1 (build f7e7bcb)Copyright 2014 Yahoo! Inc. All rights reserved.Licensed under the BSD License.http://yuilibrary.com/license/*/html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}ul{ font-size: 0;}/*使用font-size:0解决了inline-block和inline的空白*/ul.t1 li{ display: inline-block; border: solid 1px red; margin: 50px 0 0; font-size: 12px;}/*不做兼容处理*/ul.t2 li{ display: inline; border: solid 1px red; margin: 50px 0 0; font-size: 12px; }ul.t3{ width: 186px; height: 30px; background: #ccc; }ul.t3 li{ display: inline-block; width: 60px; font-size: 12px; border: solid 1px black;}ul.t3 li{ *display: inline;}/*处理ie7/6的inline-block的兼容*/div.ta a{ border: solid 1px red;}/*不使用font-size:0折行排列的html代码会有大约一个空格的空白*/div.tspan span{ border: solid 1px red;}.lsjs_rightstu{ height:109px; width:896px; background:#000; overflow: hidden; font-size: 0;}.lsjs_rightstua{ display: inline-block; font-size: 12px; width:224px; height:109px; overflow:hidden;}.lsjs_rightstua{ *display: inline;}.lsjs_rightstua img{  width:224px; height:109px;}

各浏览器表现如下图：

ie7

firefox

google

opera

ie6,不过好像加了边框总和是186但是也没和ul的宽度一致，很奇怪，

到这里才发现确实是只有当a标签包裹img的时候使用网络上提供的那些办法是不起效果的，这个原因到现在都还没整明白，我在用ul li包裹img也都能完美兼容各个浏览器的

ul.t3{ height:109px; width:896px; background:#000; overflow: hidden; font-size: 0;}
ul.t3 li{ display: inline-block; font-size: 12px; width:224px; height:109px; overflow:hidden;}
ul.t3 li{ *display: inline;}

主体是ie7/6的表现，都很完美，

0 0