ie 6下页面错了，第一次调兼容性，这要怎么弄呢

lingling9978 2014-01-06 10:24:40

网页代码：

<!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>1225</title>
<style type="text/css">
body{margin:0 auto; padding:0; font-size:12px; font-family:"宋体";background:#470101 url(imgs/bg.jpg) no-repeat center top;}
h1,h2,h3,ul,li,img,p,button,span,div{margin:0;padding:0; list-style:none; border:none;}
img{display:block;}
.clear{clear:both;}
/*主体部分开始*/
.wrapper{width:950px; margin:0 auto;}
button{width:98px; height:24px;background:url(imgs/14.png) no-repeat; color:#fff; font-size:12px;margin-top:11px;}
.dianzhao{margin:0 auto; height:121px;}
.dianzhao img{ width:950px; height:121px;}
.nav{height:29px;line-height:29px; width:950px;color:#fff; background:url(imgs/55.jpg) repeat-x; }
.nav ul{padding-left:29px; font-size:15px;}
.nav ul li{float:left; margin-left:18px;}
.nav ul li span{display:inline-block; padding-left:18px;}
.wid950{width:950px; margin:0 auto;}
.wid950 img{width:950px; height:200px;}
/*第一部分*/
.content-one{width:950px; height:412px;background:url(imgs/8.jpg) no-repeat;}
.content-one ul{padding-top:12px; margin-left:85px; position:relative;}
.content-one ul li{float:left; width:254px; margin-right:24px;}
.content-one ul li img{width:254px; height:254px; border:1px solid #cccccc;}
.content-one ul li img.hot{ width:57px; height:57px;position:absolute;left:754px;top:12px;}
.content-one ul li p{margin-top:11px;height:20px; line-height:20px; text-align:center; color:#cf1b06; font-size:20px; }
.content-one ul li p.spec{margin-top:4px; height:12px; line-height:12px; text-align:center; font-size:12px; color:#6c6a69; font-weight:bold;}
.content-one ul li span{display:inline-block; color:#c41704; font-size:20px;margin-top:12px;padding-left:45px;}

/*第二部分*/
.content-two{width:950px; margin:0 auto;}
.content-two .top{width:950px; height:67px; background:url(imgs/18.jpg) no-repeat;}
.content-two ul{width:888px; height:577px; background:url(imgs/17.jpg) no-repeat; padding-top:33px; padding-left:62px;}
.content-two ul li{float:left;width:191px; height:196px; border:1px solid #ffc9ca; margin-right:80px;margin-bottom:80px;padding:10px 10px 2px 23px;position:relative;}

.content-two ul li img{width:74px; height:194px; float:right;}
.content-two ul li img.maozi{width:83px; height:46px; position:relative;left:-151px; top:-236px;}
.content-two ul li img.spec{width:111px; height:45px; float:left;}
.content-two ul li h2{padding-top:16px;font-size:16px; color:#389900;}
.content-two ul li span{display:inline-block;padding-top:47px; font-size:14px; color:#ccc;}
.content-two ul li span.te{font-size:20px; color:#e11200; padding-top:5px;}
.content-two ul li button{padding:0; margin:0;}
.content-two ul li .dibu{width:273px; height:30px; line-height:30px;text-align:center;background:url(imgs/22.png) no-repeat; position:absolute;top:208px; left:-25px; font-size:18px; color:#fff; }

</style>
</head>

<body>

<div class="wrapper">

<div class="dianzhao"><img src="imgs/dianzhao.jpg" alt="店铺招牌"></div>
<div class="nav"><ul><li>首页<span>/</span></li><li>店铺评分<span>/</span></li><li>品牌故事<span>/</span></li><li>单方精油<span>/</span></li><li>复方精油<span>/</span></li><li>基础油<span>/</span></li><li>植物原液<span>/</span></li><li>精油鉴别<span>/</span></li><li>精油使用方法<span>/</span></li></ul></div>
<div class="wid950"><img src="imgs/1.jpg"><img src="imgs/2.jpg"><img src="imgs/3.jpg"><img src="imgs/4.jpg"><img src="imgs/5.jpg"><img src="imgs/6.jpg"><img src="imgs/7.jpg"></div>


<div class="content-one">
<ul>

<li><img src="imgs/13.jpg"><p>祛痘祛印，淡化疤痕</p><p class="spec">新疆顶级薰衣草精油</p><span>￥48.0</span> <button>立即购买</button></li>
<li><img src="imgs/13.jpg"><p>祛痘祛印，淡化疤痕</p><p class="spec">新疆顶级薰衣草精油</p><span>￥48.0</span> <button>立即购买</button></li>
<li><img src="imgs/13.jpg"><img src="imgs/15.png" class="hot";><p>祛痘祛印，淡化疤痕</p><p class="spec">新疆顶级薰衣草精油</p><span>￥48.0</span> <button>立即购买</button></li>
<div class="clear"></div>

</ul>

</div>



<div class="content-two">
<div class="top"></div>
<ul>
<li><img src="imgs/19.png"><h2>玫瑰亲肤精油</h2><span>原价169元</span><br/><span class="te">圣诞价：</span><img src="imgs/20.png" class="spec"><button>立即购买</button><img src="imgs/21.png" class="maozi"><div class="dibu">祛除痘印修复细胞</div></li>
<li><img src="imgs/19.png"><h2>玫瑰亲肤精油</h2><span>原价169元</span><br/><span class="te">圣诞价：</span><img src="imgs/20.png" class="spec"><button>立即购买</button><img src="imgs/21.png" class="maozi"><div class="dibu">祛除痘印修复细胞</div></li>
<li style="margin-right:0;"><img src="imgs/19.png"><h2>玫瑰亲肤精油</h2><span>原价169元</span><br/><span class="te">圣诞价：</span><img src="imgs/20.png" class="spec"><button>立即购买</button><img src="imgs/21.png" class="maozi"><div class="dibu">祛除痘印修复细胞</div></li>
<li><img src="imgs/19.png"><h2>玫瑰亲肤精油</h2><span>原价169元</span><br/><span class="te">圣诞价：</span><img src="imgs/20.png" class="spec"><button>立即购买</button><img src="imgs/21.png" class="maozi"><div class="dibu">祛除痘印修复细胞</div></li>
<li><img src="imgs/19.png"><h2>玫瑰亲肤精油</h2><span>原价169元</span><br/><span class="te">圣诞价：</span><img src="imgs/20.png" class="spec"><button>立即购买</button><img src="imgs/21.png" class="maozi"><div class="dibu">祛除痘印修复细胞</div></li>
<li style="margin-right:0;"><img src="imgs/19.png"><h2>玫瑰亲肤精油</h2><span>原价169元</span><br/><span class="te">圣诞价：</span><img src="imgs/20.png" class="spec"><button>立即购买</button><img src="imgs/21.png" class="maozi"><div class="dibu">祛除痘印修复细胞</div></li>

</ul>
</div>

</div>

</body>
</html>

其他浏览器显示：

ie 6中显示

...全文

121 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

孤飞不倦 2014-01-07

打赏
举报

兼容ie6.....节哀...一般来说需要写两套代码了。把ie6的代码写在下面，这个就是js判断ie6了。

<!--[if lte IE 6]>
    <style> 
    </style>   
    <script type="text/javascript">
    </script>
    <![endif]-->

另外还可以用css hack，这个你自己去查一下就知道。这个不怎么推荐，但很多时候比较方便。

dream_nora 2014-01-07

打赏
举报

.content-two ul li{float:left;width:191px; height:196px; border:1px solid #ffc9ca; margin-right:80px;margin-bottom:80px;padding:10px 10px 2px 23px;position:relative; display:inline;} 加个这个试试