当前位置：首页 → 问答吧 → ie8下一行四列的图片第2行的3个图片跳到第3行去了

ie8下一行四列的图片第2行的3个图片跳到第3行去了

时间：2010-10-10

来源：互联网

我现在想让图文一行四列显示，一共显示2行，但是现在是第一行正常，第2行的前三个图文都跑到第3行去了，效果在IE8下截图如下，IE6下正常，FF也不正常。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css">  </style> </head> <body> <div id="shipintable"> <div id="contenttabletitle"> <div id="contenttableleft"><a href="/video/">早教视频</a></div> <div id="contenttablecenter"><a href="/Video/zjflash/">早教flash</a>| <a href="/Video/bbzp/">宝宝自拍</a>| </div> <div id="contenttableright"><a href="/video/">更多视频</a></div> </div> <div id="contentbody"> <div id="shipinlist"> <li><a href="/7552.html" title="幽默叔叔教你这是什么"><img src="/UploadFiles/Video/2010/10/False.jpg"></a><h4><a href="/7552.html" title="幽默叔叔教你这是什么">幽默叔叔教你这是什么</a></h4></li><li><a href="/7458.html" title="你知道小刺猬的绝招吗"><img src="/UploadFiles/Video/2010/9/False17.jpg"></a><h4><a href="/7458.html" title="你知道小刺猬的绝招吗">你知道小刺猬的绝招吗</a></h4></li><li><a href="/7457.html" title="边吃冰淇淋边来学英语"><img src="/UploadFiles/Video/2010/9/False16.jpg"></a><h4><a href="/7457.html" title="边吃冰淇淋边来学英语">边吃冰淇淋边来学英语</a></h4></li><li><a href="/7440.html" title="在森林和园野上"><img src="/UploadFiles/Video/2010/9/False15.jpg"></a><h4><a href="/7440.html" title="在森林和园野上">在森林和园野上</a></h4></li><li><a href="/7439.html" title="要做互帮互助的好伙伴"><img src="/UploadFiles/Video/2010/9/False14.jpg"></a><h4><a href="/7439.html" title="要做互帮互助的好伙伴">要做互帮互助的好伙伴</a></h4></li><li><a href="/7438.html" title="消防队长让人哈哈大笑"><img src="/UploadFiles/Video/2010/9/False13.jpg"></a><h4><a href="/7438.html" title="消防队长让人哈哈大笑">消防队长让人哈哈大笑</a></h4></li><li><a href="/7437.html" title="我们来比比看谁高谁矮"><img src="/UploadFiles/Video/2010/9/False12.jpg"></a><h4><a href="/7437.html" title="我们来比比看谁高谁矮">我们来比比看谁高谁矮</a></h4></li><li><a href="/7436.html" title="老虎，狐狸，和一只鸡"><img src="/UploadFiles/Video/2010/9/False11.jpg"></a><h4><a href="/7436.html" title="老虎，狐狸，和一只鸡">老虎，狐狸，和一只鸡</a></h4></li> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: batistutafans 发布时间: 2010-10-10

另外我想让这个h5的高度降低一些，好像设置了height不起作用。

作者: batistutafans 发布时间: 2010-10-10

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css">  </style> </head> <body> <div id="shipintable"> <div id="contenttabletitle"> <div id="contenttableleft"><a href="/video/">早教视频</a></div> <div id="contenttablecenter"><a href="/Video/zjflash/">早教flash</a>| <a href="/Video/bbzp/">宝宝自拍</a>| </div> <div id="contenttableright"><a href="/video/">更多视频</a></div> </div> <div id="contentbody"> <ul id="shipinlist"> <li><a href="/7552.html" title="幽默叔叔教你这是什么"><img src="/UploadFiles/Video/2010/10/False.jpg"></a><h4><a href="/7552.html" title="幽默叔叔教你这是什么">幽默叔叔教你这是什么</a></h4></li><li><a href="/7458.html" title="你知道小刺猬的绝招吗"><img src="/UploadFiles/Video/2010/9/False17.jpg"></a><h4><a href="/7458.html" title="你知道小刺猬的绝招吗">你知道小刺猬的绝招吗</a></h4></li><li><a href="/7457.html" title="边吃冰淇淋边来学英语"><img src="/UploadFiles/Video/2010/9/False16.jpg"></a><h4><a href="/7457.html" title="边吃冰淇淋边来学英语">边吃冰淇淋边来学英语</a></h4></li><li><a href="/7440.html" title="在森林和园野上"><img src="/UploadFiles/Video/2010/9/False15.jpg"></a><h4><a href="/7440.html" title="在森林和园野上">在森林和园野上</a></h4></li><li><a href="/7439.html" title="要做互帮互助的好伙伴"><img src="/UploadFiles/Video/2010/9/False14.jpg"></a><h4><a href="/7439.html" title="要做互帮互助的好伙伴">要做互帮互助的好伙伴</a></h4></li><li><a href="/7438.html" title="消防队长让人哈哈大笑"><img src="/UploadFiles/Video/2010/9/False13.jpg"></a><h4><a href="/7438.html" title="消防队长让人哈哈大笑">消防队长让人哈哈大笑</a></h4></li><li><a href="/7437.html" title="我们来比比看谁高谁矮"><img src="/UploadFiles/Video/2010/9/False12.jpg"></a><h4><a href="/7437.html" title="我们来比比看谁高谁矮">我们来比比看谁高谁矮</a></h4></li><li><a href="/7436.html" title="老虎，狐狸，和一只鸡"><img src="/UploadFiles/Video/2010/9/False11.jpg"></a><h4><a href="/7436.html" title="老虎，狐狸，和一只鸡">老虎，狐狸，和一只鸡</a></h4></li> </ul> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: radom 发布时间: 2010-10-10

我记得我使用的方法是给图片加个 vertical-align:middle 貌似就解决了

作者: millionfor 发布时间: 2010-10-10