首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

ie 6下页面错了,第一次调兼容性,这要如何弄呢

2014-01-19 
ie 6下页面错了,第一次调兼容性,这要怎么弄呢网页代码:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Tra

ie 6下页面错了,第一次调兼容性,这要怎么弄呢
网页代码:


<!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="ie 6下页面错了,第一次调兼容性,这要如何弄呢"></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 alt="ie 6下页面错了,第一次调兼容性,这要如何弄呢" />


ie 6中显示

ie 6下页面错了,第一次调兼容性,这要如何弄呢
[解决办法]
兼容ie6.....节哀...一般来说需要写两套代码了。

把ie6的代码写在下面,这个就是js判断ie6了。

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


另外还可以用css hack,这个你自己去查一下就知道。这个不怎么推荐,但很多时候比较方便。
[解决办法]
.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;}  加个这个试试

热点排行