我的CSS代码为什么在IE中显示正常，在火狐中显示不正常，请高手指点
这是一段图片浏览的代码，dreamweavercs4编辑的，IE测试没问题，可是火狐浏览器显示不正常，图片重叠，错位，请高手帮忙指点，修改。<head><linkrel=...
这是一段图片浏览的代码，dreamweaver cs4编辑的，IE测试没问题，可是火狐浏览器显示不正常，图片重叠，错位，请高手帮忙指点，修改。
<head> <link rel = "stylesheet" type = "text/css" href = "style.css" /> </head>
abbr { font-size : 12px ; } .text10pxwhite { font-size : 10px ; color : #FFFFFF ; }
<!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=utf-8" />
<style type="text/css">
<!--
/* common styling */
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}
/* slides styling */
.photo {padding:15px; background:#222; width:880px; height:350px; text-align:left;}
.photo h1 {font-size:14px; font-weight:normal; color:#fc0; margin:0 0 0 5px; padding:0;}
.photo ul {list-style:none; padding:0; margin:0; width:390px; background:#333; border:1px solid #666; position:relative; height:250px;}
.photo ul li {display:inline; width:20px; height:20px; float:left; margin:5px;}
.photo ul li a b {display:none;}
.photo ul li a img {display:block; width:64px; height:48px; border:1px solid #666; border-top-color:#ccc;}
.photo ul li a:hover {white-space:normal;position:relative;}
.photo ul li a:active, .photo ul li a:focus {position:static; outline:0;}
.photo ul li a:focus.vert img, .photo ul li a:active.vert img {background-color:#000; position:absolute; left:420px; top:0; width:400px; height:300px; border:1px solid #fc0; padding:5px 45px;}
.photo ul li a:focus.hor img, .photo ul li a:active.hor img {background-color:#000; position:absolute; left:420px; top:0; width:400px; height:300px; border:1px solid #fc0; padding:5px 45px;}
.jenfy { color:#fff;}
.jenfy a{ color:#fff; }
.jenfy a:hover{ color:#fff;}
-->
</style>
</head>
<body style="background:#000">
<div class="photo">
<ul>
<li><a href="#nogo1" class="hor"><img src="http://img.auctiva.com/imgdata/6/5/5/6/1/6/webimg/296533005_o.jpg" alt="" title="" /></a></li>
<li><a href="#nogo2" class="vert"><img src="http://img.auctiva.com/imgdata/6/5/5/6/1/6/webimg/296532992_o.jpg" alt="" title="" /></a></li>
<li><a href="#nogo2" class="vert"><img src="http://img.auctiva.com/imgdata/6/5/5/6/1/6/webimg/296532992_o.jpg" alt="" title="" /></a></li>
<li><a href="#nogo2" class="vert"><img src="http://img.auctiva.com/imgdata/6/5/5/6/1/6/webimg/296532992_o.jpg" alt="" title="" /></a></li>
<li><a href="#nogo2" class="vert"><img src="http://img.auctiva.com/imgdata/6/5/5/6/1/6/webimg/296532992_o.jpg" alt="" title="" /></a></li>
<li><a href="#nogo2" class="vert"><img src="http://img.auctiva.com/imgdata/6/5/5/6/1/6/webimg/296532992_o.jpg" alt="" title="" /></a></li>
</ul>
<h1>Photo Gallery</h1>
</div>
<br /><br /><br /><br />
<div>
<span style=" display:none"></span></div>
</body>
</html>
谢谢各位大大！！ 展开
<head> <link rel = "stylesheet" type = "text/css" href = "style.css" /> </head>
abbr { font-size : 12px ; } .text10pxwhite { font-size : 10px ; color : #FFFFFF ; }
<!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=utf-8" />
<style type="text/css">
<!--
/* common styling */
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}
/* slides styling */
.photo {padding:15px; background:#222; width:880px; height:350px; text-align:left;}
.photo h1 {font-size:14px; font-weight:normal; color:#fc0; margin:0 0 0 5px; padding:0;}
.photo ul {list-style:none; padding:0; margin:0; width:390px; background:#333; border:1px solid #666; position:relative; height:250px;}
.photo ul li {display:inline; width:20px; height:20px; float:left; margin:5px;}
.photo ul li a b {display:none;}
.photo ul li a img {display:block; width:64px; height:48px; border:1px solid #666; border-top-color:#ccc;}
.photo ul li a:hover {white-space:normal;position:relative;}
.photo ul li a:active, .photo ul li a:focus {position:static; outline:0;}
.photo ul li a:focus.vert img, .photo ul li a:active.vert img {background-color:#000; position:absolute; left:420px; top:0; width:400px; height:300px; border:1px solid #fc0; padding:5px 45px;}
.photo ul li a:focus.hor img, .photo ul li a:active.hor img {background-color:#000; position:absolute; left:420px; top:0; width:400px; height:300px; border:1px solid #fc0; padding:5px 45px;}
.jenfy { color:#fff;}
.jenfy a{ color:#fff; }
.jenfy a:hover{ color:#fff;}
-->
</style>
</head>
<body style="background:#000">
<div class="photo">
<ul>
<li><a href="#nogo1" class="hor"><img src="http://img.auctiva.com/imgdata/6/5/5/6/1/6/webimg/296533005_o.jpg" alt="" title="" /></a></li>
<li><a href="#nogo2" class="vert"><img src="http://img.auctiva.com/imgdata/6/5/5/6/1/6/webimg/296532992_o.jpg" alt="" title="" /></a></li>
<li><a href="#nogo2" class="vert"><img src="http://img.auctiva.com/imgdata/6/5/5/6/1/6/webimg/296532992_o.jpg" alt="" title="" /></a></li>
<li><a href="#nogo2" class="vert"><img src="http://img.auctiva.com/imgdata/6/5/5/6/1/6/webimg/296532992_o.jpg" alt="" title="" /></a></li>
<li><a href="#nogo2" class="vert"><img src="http://img.auctiva.com/imgdata/6/5/5/6/1/6/webimg/296532992_o.jpg" alt="" title="" /></a></li>
<li><a href="#nogo2" class="vert"><img src="http://img.auctiva.com/imgdata/6/5/5/6/1/6/webimg/296532992_o.jpg" alt="" title="" /></a></li>
</ul>
<h1>Photo Gallery</h1>
</div>
<br /><br /><br /><br />
<div>
<span style=" display:none"></span></div>
</body>
</html>
谢谢各位大大！！ 展开
5个回答
展开全部
ul li 这个火狐的解释和IE的不一样。
尽量用固定数值设置宽度和间距。
尽量用固定数值设置宽度和间距。
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
有的时候是这样，各个块都加上overflow:hidden试试 他有 清除浮动的功能，不加他有的时候父块约束不住子块
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
250801077加我详解
原因楼上的说了一部分,主要的原因是在margin-left的双倍问题,还有就是UL和LI的原因.为了IE6,7.firefox都支持,一般在CSS最顶部会有个格式化代码.
div,img,td,li,ul,ol,h1,span等{margin:0px; padding:0px;}
ul,li{list-style:none;}
image {border:0px;}
原因楼上的说了一部分,主要的原因是在margin-left的双倍问题,还有就是UL和LI的原因.为了IE6,7.firefox都支持,一般在CSS最顶部会有个格式化代码.
div,img,td,li,ul,ol,h1,span等{margin:0px; padding:0px;}
ul,li{list-style:none;}
image {border:0px;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
css在各个浏览器中都是不同的，但是可以通过方法实现，这个需要学习，在我的论坛里收录了帖子，感兴趣可以看下bbs.xtzonghe.cn在网站制作板块。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
参考：
1，最好固定宽度和高度；
2，不能熟用float的话也容易出错；
3，楼上兄弟们的回答也可以参考。
1，最好固定宽度和高度；
2，不能熟用float的话也容易出错；
3，楼上兄弟们的回答也可以参考。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
