61,112
社区成员
发帖
与我相关
我的任务
分享IE与firefox居中兼容问题
<html>
<head>
<style type="text/css">
body,div,ul,li{ margin:0px; padding:0px; }
body{background-image:url(pic/clouds.gif); background-repeat:no-repeat; background-position:center top;}
.navigation{ width:1000px;height:54px; background:#383838;margin:20px auto 0px;}
.navigation ul{width:1000px;height:54px;}
.navigation ul li{list-style:none; float:left; text-align:center; height:54px; line-height:54px; }
.navigation ul li a{ text-decoration:none; display:block;padding:0px 5px; color:#ffffff;float:left;font-size:12px;width:76px;font-family:"宋体"; }
.navigation ul li a:hover{background:url("pic/navHoverBg.png");}
.centerpic{margin:10px 0px;/*不知为何auto不能居中，只能用下面的居中*/
text-align:center;}
.content{ width:1000px;height:600px;margin:10px auto 0px;background:#cccccc; }
.left{ width:680px; height:600px;float:left; }
.left img{ margin:10px 0 0 10px;}
.left h2{ color:#910800;margin-left:10px;}
.left p{margin-left:10px;text-indent:2em; }
.right{width:320px;height:600px;float:left;}
.title{
width:299px;
height:32px;
margin-left:10px;
margin-top:10px;
background-image:url("pic/title.jpg");
background-repeat:no-repeat;
color:#ffffff;
padding-left:20px;
line-height:32px;
}
.right ul{ margin-left:30px; margin-top:10px; list-style-image:url("pic/dot.gif");}
.right ul li{height:25px; font-size:16px;}
.bottom{ width:1000px;height:54px; background:#383838;margin:10px auto 10px;}
</style>
</head>
<body>
<div>
<!--导航-->
<div class="navigation">
<ul>
<li><img src="pic/logo.png" /></li>
<li><a href="">首 页</a></li>
<li><a href="">培训课程</a></li>
<li><a href="">优秀学员</a></li>
<li><a href="">课程疑问</a></li>
<li><a href="">职业生涯</a></li>
<li><a href="">学员社区</a></li>
<li><a href="">官方博客</a></li>
<li><a href="">学院地址</a></li>
</ul>
</div>
<!--中部图-->
<div class="centerpic">
<img src="pic/banner.jpg"/>
</div>
<div class="content">
<div class="left">
<img src="pic/articleBanner.jpg"/>
<h2>好找工作吗？</h2>
<p>我们换一种方法表达上面的意思，因为红色方块的“左侧浮动”，才导致蓝色方块上移至红色方块的尾后；在上个例子中，为了达到浏览器兼容性，我们在红色、蓝色方块CSS代码中分别加了“float:left;”，这样IE和FF中显示效果一样。</p>
<p>我们换一种方法表达上面的意思，因为红色方块的“左侧浮动”，才导致蓝色方块上移至红色方块的尾后；在上个例子中，为了达到浏览器兼容性，我们在红色、蓝色方块CSS代码中分别加了“float:left;”，这样IE和FF中显示效果一样，如果此时我们还想放一个宽度400像素，高度100像素的绿色方块，并让其处于第二行，希望效果如下图：</p>
</div>
<div class="right">
<div class="title">职业生涯</div>
<ul>
<li>我们换一种方法</li>
<li>我们换一种方法</li>
<li>我们换一种方法</li>
<li>我们换一种方法</li>
<li>我们换一种方法</li>
<li>我们换一种方法</li>
</ul>
<div class="title">职业生涯</div>
<ul>
<li>我们换一种方法</li>
<li>我们换一种方法</li>
<li>我们换一种方法</li>
<li>我们换一种方法</li>
<li>我们换一种方法</li>
<li>我们换一种方法</li>
</ul>
</div>
</div>
<div class="bottom">
</div>
</div>
</body>
</html>
IE8显示
firefox显示
为什么Ie显示不居中，菜鸟求解答啊！
...全文
请发表友善的回复…
发表回复
