div+css当鼠标滑动到每行第四个图片时，下一行图片就浮动到第三行了 怎么回事 测试IE8
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!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" />
<style type="text/css">
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
#layout { width:390px; border:2px solid #ccc; padding-bottom:20px; overflow:auto; zoom:1;}
#layout ul li { width:72px; float:left; margin:20px 0 0px 20px; display:inline; text-align:center;}
#layout ul li a { display:block;}
#layout ul li a img { padding:1px; border:1px solid #e1e1e1; margin-bottom:3px;}
#layout ul li a:hover img { padding:0px; border:2px solid #f98510;}
</style>
</head></p>
<p><body>
<div id="layout">
<ul>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
</ul>
</div>
</body>
</html>
每行4个图片 鼠标一放到第四个 下一行的前三张图片就会被挤到下一行 我用360 世界之窗试过没问题 就用IE8 有问题 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
#layout { width:390px; border:2px solid #ccc; padding-bottom:20px; overflow:auto; zoom:1;}
#layout ul li { width:72px; float:left; margin:20px 0 0px 20px; display:inline; text-align:center;}
#layout ul li a { display:block;}
#layout ul li a img { padding:1px; border:1px solid #e1e1e1; margin-bottom:3px;}
#layout ul li a:hover img { padding:0px; border:2px solid #f98510;}
</style>
</head></p>
<p><body>
<div id="layout">
<ul>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
</ul>
</div>
</body>
</html>
每行4个图片 鼠标一放到第四个 下一行的前三张图片就会被挤到下一行 我用360 世界之窗试过没问题 就用IE8 有问题 展开
6个回答
展开全部
虽然我测试出来的也没有问题，这里有段错误：</head></p>
<p><body>
.................................
这里有个建议：你的代码中：a:hover:img{border:2px solid #f98510;}},这里相当于鼠标移动后多宽度和高度多了4px，所以移动到第四个图片后就被撑开了，把
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
中图片改小一个像素就OK了，或者你也可以用hick方法特殊定义ie8
但最好是每行用一个<ul>..</ul>；
<p><body>
.................................
这里有个建议：你的代码中：a:hover:img{border:2px solid #f98510;}},这里相当于鼠标移动后多宽度和高度多了4px，所以移动到第四个图片后就被撑开了，把
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
中图片改小一个像素就OK了，或者你也可以用hick方法特殊定义ie8
但最好是每行用一个<ul>..</ul>；
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我测试了没你所说的情况
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我也测试了没你所说的情况
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我也测试了也没你所说的情况
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
#layout ul li { width:72px; float:left; margin:20px 0 0px 20px; display:inline; text-align:center;}
这段的样式要这样写
#layout ul li { width:72px; float:left; margin:20px 0 0px 20px;_ display:inline; text-align:center;overflow:hidden;}
这段的样式要这样写
#layout ul li { width:72px; float:left; margin:20px 0 0px 20px;_ display:inline; text-align:center;overflow:hidden;}
追问
我试过了，还是没改过来
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type=text/css>.baidu{font-size:14px;line-height:1.5;}a{color:#0000cc;}
a.t{color: #006633;font-size:14px;text-decoration:none;}a.cn {color:#555555;}</style>
<script language="JavaScript" type="text/JavaScript" src="http://zhidao.baidu.com/q?ct=21&cm=14&tn=fcucommend&rn=5"></script>
a.t{color: #006633;font-size:14px;text-decoration:none;}a.cn {color:#555555;}</style>
<script language="JavaScript" type="text/JavaScript" src="http://zhidao.baidu.com/q?ct=21&cm=14&tn=fcucommend&rn=5"></script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
