今天遇到一个问题,是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 class="lsjs_rightstu">
<a class="lsjs_rightstua" href="#"><imgsrc="style/images/q1.jpg" /></a><aclass="lsjs_rightstua" href="#"><imgsrc="style/images/q2.jpg" /></a><aclass="lsjs_rightstua" href="#"><imgsrc="style/images/q3.jpg" /></a><aclass="lsjs_rightstua" href="#"><imgsrc="style/images/q4.jpg" /></a>
</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化就好了
<div class="lsjs_rightstu">
<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
opera
ie6,不过好像加了边框总和是186但是也没和ul的宽度一致,很奇怪,
到这里才发现确实是只有当a标签包裹img的时候使用网络上提供的那些办法是不起效果的,这个原因到现在都还没整明白,我在用ul li包裹img也都能完美兼容各个浏览器的
<ul class="t3">
<li><img src="style/images/q1.jpg" /></li>
<li><img src="style/images/q1.jpg" /></li>
<li><img src="style/images/q1.jpg" /></li>
<li><img src="style/images/q1.jpg" /></li>
</ul>
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的表现,都很完美,