Question

div css 样式兼容问题 ie6下不正常

.LittleBox .BigBox_List li a { float: left; line-height: 22px;width: 150px;}.LittleBox .BigBox_List li a img { height: 136px;width: 146px;border: 1px solid #D9D9D9; padding:1px;}
.LittleBox .BigBox_ImgList{padding: 10px; width:189px;margin-left:1px; border: 1px solid #f29201; border-top:none;}.LittleBox .BigBox_ImgList li{width:90px; float:left; height:104px}
.LittleBox .BigBox_ImgList li a { float: left; width:85px; padding:5px; text-align:center;}
.LittleBox .BigBox_ImgList li a img { width:81px; height:61px; border: 1px solid #D9D9D9; padding:1px;}
正常情况下 display:inline 试过了 没用呢

对应现在的样式：.LittleBox .BigBox_ImgList{padding: 10px; width:189px;margin-left:1px; border: 1px solid #f29201; border-top:none;_background:#f00;}.LittleBox .BigBox_ImgList li{width:90px; float:left; height:104px;_background:#0f0;_border: 1px solid #00f;}.LittleBox .BigBox_ImgList li a {display:block;width:82px; padding:5px; text-align:center;_padding:0px;}.LittleBox .BigBox_ImgList li a img { width:81px; height:61px; border: 1px solid #D9D9D9; padding:1px;_padding:0px;}





Answer 1

我仿照你的意思写的
<div class="left_lb">
<ul>
<li><a href="#" target="_blank"><img src="images/01.jpg" alt="" /></a><a href="#" target="_blank">文字内容</a></li>
<li><a href="#" target="_blank"><img src="images/01.jpg" alt="" /></a><a href="#" target="_blank">文字内容</a></li>
<li><a href="#" target="_blank"><img src="images/01.jpg" alt="" /></a><a href="#" target="_blank">文字内容</a></li>
<li><a href="#" target="_blank"><img src="images/01.jpg" alt="" /></a><a href="#" target="_blank">文字内容</a></li>
</ul>
</div>

css：
.left_lb{width:190px; border:1px solid #f29201; border-top:none; padding:10px; margin-left:1px; overflow:hidden;}
.left_lb li{width:85px; padding:5px; float:left;}
.left_lb li a{display:block; text-align:center; line-height:1.8;}
.left_lb li img{width:81px; height:61px; border:1px solid #D9D9D9; padding:1px;}
你的那个代码比较乱，而且宽度大小不对（就是里边宽度总和与外边总大小不等），可能是宽度引起的问题吧，你对比这个看看
display:inline这个是在有浮动有margin值时才用的，你这里不需要

Answer 2

你这个问题我大概知道是什么原因造成的！

大概是padding或者margin造成的，你给这几个块设置背景颜色，看看位置，是不是被移位了！

还有疑问可以追问我哦！

追问

是被移位了  我以前也遇到过  很难解决  这次搞了好久  还是没弄好  大神帮我看看啊

追答

因为你代码比较多，我这里没法测试，我给你一种方法，使用定义列表试试看！

这里是图片描述

给dl设置一个合理的width和height，都设置好了以后，在设置左浮动就可以了，如果要调他们之间的间距，可以适当的使用padding和margin，记住，最好一边设置一边在不同浏览器调试，你才知道问题出在哪边了！

Answer 3

估计是IE6的双边距问题。在你浮动的样式里都加上这句
display:inline
你说的不清楚，我也只能根据经验猜测。

加在
.LittleBox .BigBox_ImgList li{width:90px; float:left; height:104px}

这句里。
还有为什么你的A都要浮动？

追问

浮动是为了横向排列啊 我的图片死每行两个

追答

这个知道啊。但是这种情况，一般都是

文字

就行了。li设置浮动，记得加display:内嵌
P就加行高就行 给他定个高度宽度

Answer 4

建议不要再去理会IE6的效果了，IE6已经没有多少网站支持了。

Answer 5

楼主， img属性里加一个 vertical-align:middle; 一般就可以了

Answer 6

请问下正常是什么样的？