网络编程
位置：首页>> 网络编程>> 网页设计>> css学习笔记：为什么在IE6下图片会往下掉一行

css学习笔记：为什么在IE6下图片会往下掉一行

作者：好好　来源：好好blog　发布时间：2009-06-19 12:50:00　

标签：笔记,css,ie6,图片

如下图，我们在做图片logo列表的时候通常是用li标签来实现。

html：

<ul class="logolist">
   <li><a href="#"><img src="images/logo01.gif" /></a></li>
   <li><a href="#"><img src="images/logo01.gif" /></a></li>
   <li><a href="#"><img src="images/logo01.gif" /></a></li>
   <li><a href="#"><img src="images/logo01.gif" /></a></li>
   <li><a href="#"><img src="images/logo01.gif" /></a></li>
   <li><a href="#"><img src="images/logo01.gif" /></a></li>
<ul>

css部分：

.logolist { margin:0 0 0 11px; padding:0;}
.logolist li { margin:0; padding:2px 7px 2px 0; float:left; display:inline}

我们在做html静态的时候在各个浏览器下都是正常的。在程序开发之后，在动态下，IE6浏览器中就成了如图所示情况，有一个logo图片会往小掉一行，这个问题在我们兄弟公司的网站项目中也碰到过，我记得在淘宝商城网站看上线那会也出现这样的情况。

我们分析：

● 就是两个div的宽度加起来超过了父级的宽度
● 一边div用了float,而另一边div没有用float属性。
● IE6下的双margin边距bug(解决办法在css中加上，display:inline)

可现在这个情况，这些问题都没有，那是什么原因让图片在IE6下错位了呢？

后来经过我不断尝试，终于发现原来是高度问题引起的。

需要在li中设置li的高度:

.logolist { margin:0 0 0 11px; padding:0;}
.logolist li { margin:0; padding:0; float:left; display:inline; width:100px; height:50px}
最后问题得以解决！

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com