padding-top在IE，FF上的区别及矫正

最新推荐文章于 2021-08-03 21:15:10 发布

younger_z

最新推荐文章于 2021-08-03 21:15:10 发布

阅读量1.1k

点赞数

分类专栏：网页开发文章标签： ie 测试 border firebug url 浏览器

网页开发专栏收录该内容

31 篇文章

订阅专栏

本文探讨了解决CSS在不同浏览器如IE和Firefox上显示差异的方法，包括使用!important属性调整元素宽度和解决<p>和<ol>标签在各浏览器间的显示差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Html代码

<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<head>
<title>宏飞软件-CSS背景测试</title>
<style type="text/css">
#chileboy{
border:1px solid red;
}
#oneleft{
/**注意**/
width: 603px !important;
width: 615px;
/**注意**/
height:1478px !important;
height:1500px;
border:1px solid #000000;
background-color: #DDA0DD;
background-image:url(../img/textJpg.jpg);
background-repeat:no-repeat;
background-position:25px 50px;
/**background-attachment:fixed;
background-position:top;**/
padding-left:10px;
/**注意**/
padding-top: 20px;
/**
如果这里不想用padding-top的话，那么可以直接用下面2处加上代码，下过是一样的
**/
float:left;
}
#oneboy{
width:1000px;
}
#oneleft p{
text-indent: -2em;
padding-left: 2em;
margin-top: 0px;
/**2处 padding-top:20px;**/
}
#oneright{
background-color:#ff7f50;
background-image: url(../img/right.jpg);
background-position:50% 80px;
background-repeat: no-repeat;
border:1px solid #000000;
width: 358px !important;
width: 380px;
height:1478px !important;
height:1500px;
float:right;
padding-left:20px;
padding-top: 20px;
}
#oneright ol{
/**注意**/
margin-top: 0px;
/**2处 padding-top:20px;**/
}
</style>
</head>
<body>
<div id="chileboy" align="center">
<div id="oneboy">
<div id="oneleft" align="left">
<p>黄思宏测试</p>
</div>
<div id="oneright" align="left">
<ol>
<li>测试</li>
<li>测试</li>
<li>测试</li>
</ol>
</div>
</div>
</div>
</body>
</html>

<html>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<head>
		<title>宏飞软件-CSS背景测试</title>
		<style type="text/css">
			#chileboy{
				border:1px solid red; 
			}	
			#oneleft{
/**注意**/
				width: 603px !important;
				width: 615px;
/**注意**/
				height:1478px !important;
				height:1500px;
				border:1px solid #000000;
				background-color: #DDA0DD;
				background-image:url(../img/textJpg.jpg);
				background-repeat:no-repeat;
				background-position:25px 50px;
				/**background-attachment:fixed;
				background-position:top;**/
				padding-left:10px;
/**注意**/
				padding-top: 20px;
                                /**
                                如果这里不想用padding-top的话，那么可以直接用下面2处加上代码，下过是一样的
                                **/
				float:left;
			}
			#oneboy{
				width:1000px;
			}
			#oneleft p{
				text-indent: -2em;
				padding-left: 2em;
				margin-top: 0px;
/**2处 padding-top:20px;**/
			}
			#oneright{
				background-color:#ff7f50;
				background-image: url(../img/right.jpg);
				background-position:50% 80px;
				background-repeat: no-repeat;
				border:1px solid #000000;
				width: 358px !important;
				width: 380px;
				height:1478px !important;
				height:1500px;
				float:right;
				padding-left:20px;
				padding-top: 20px;
			}
			
			#oneright ol{
/**注意**/
				margin-top: 0px;
/**2处 padding-top:20px;**/
			}
		</style>
	</head>
	<body>
		<div id="chileboy" align="center">
			<div id="oneboy">
				<div id="oneleft" align="left">
					<p>黄思宏测试</p>
				</div>
				<div id="oneright" align="left">
					<ol>
						<li>测试</li>
						<li>测试</li>
						<li>测试</li>
					</ol>
				</div>
			</div>
		</div>
	</body>
</html>

浏览器的兼容问题真的是很麻烦，就IE和FF，在很多方面解析的也是不是一样的，所以在编写的时候最好就是用两个浏览器都测试下。
问题一，如何解决padding,margin,border等这几个属性在IE和FF上的差异显示。

首先，举个例子
BOX{width:"300"; padding-top:"5PX";border:1px solid red;margin-top:20px}
FF Box的总宽度是： width+padding+border+margin宽度总和
IE Box的总宽度就是 width的宽度，padding+border+margin的宽度在含在width内。
所以，在FF上，你的BOX的实际宽度，就是300+5+1+20,而在IE上，BOX的宽度为300。所以你可能会遇到这样一种情况，在IE上的布局很没问题，但是到了FF上却发生了严重跑位。解决这个问题的方式是：在样式表中，在width或者是在height的属性上,多加一个width:** !important属性。!important在IE上会被忽略，但是在FF上就不会被忽略，所以可以通过设置这个属性来解决这个问题。要记得，必须把width:** !important写在正常的那个width或者是height属性之前。以前才有效果。width:** !important中**的值为300-padding,margin,border等属性的值。
问题二，如何解决<p><ol>等标签在IE,FF上显示的差异
这个是我遇到的第二问题。
如果在一个DIV层中，设置了padding-top:25px;然后这个DIV层中，有一个<P>测试文字</P>标签，那么，在IE上和在火狐上显示也是不一样的，在FF上，“测试文字”文字会被往下再移动一点，如果你用FF的Firebug看的话，会发现<P>在测试文字的上下还有类似内补丁类的边框，请看下图

所以，要把这个去掉就行了。在<p>标签的样式上，写多一个margin-top:0px；这样就解决在FF上<p>被下移的问题了。或者说，不在DIV上设置padding-top多少，而是改成在<p>中设置它的外补丁，也就是margin-top为多少，也是可以解决以上问题的。这个就要看你的需求来定了。