IE と firefox_html/css_WEB-ITnose の間の互換性の問題を中心に説明する-htmlチュートリアル-php.cn

IE と firefox_html/css_WEB-ITnose の間の互換性の問題を中心に説明する

WBOY

リリース： 2016-06-21 08:47:14

オリジナル

1180 人が閲覧しました

<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 の表示が中央に表示されないのはなぜですか?初心者の方、答えてください。