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

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

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

Html代码 复制代码  收藏代码
  1. <html>  
  2.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  3.     <head>  
  4.         <title>宏飞软件-CSS背景测试</title>  
  5.         <style type="text/css">  
  6.             #chileboy{   
  7.                 border:1px solid red;    
  8.             }      
  9.             #oneleft{   
  10. /**注意**/   
  11.                 width: 603px !important;   
  12.                 width: 615px;   
  13. /**注意**/   
  14.                 height:1478px !important;   
  15.                 height:1500px;   
  16.                 border:1px solid #000000;   
  17.                 background-color: #DDA0DD;   
  18.                 background-image:url(../img/textJpg.jpg);   
  19.                 background-repeat:no-repeat;   
  20.                 background-position:25px 50px;   
  21.                 /**background-attachment:fixed;   
  22.                 background-position:top;**/   
  23.                 padding-left:10px;   
  24. /**注意**/   
  25.                 padding-top: 20px;   
  26.                                 /**   
  27.                                 如果这里不想用padding-top的话,那么可以直接用下面2处加上代码,下过是一样的   
  28.                                 **/   
  29.                 float:left;   
  30.             }   
  31.             #oneboy{   
  32.                 width:1000px;   
  33.             }   
  34.             #oneleft p{   
  35.                 text-indent: -2em;   
  36.                 padding-left: 2em;   
  37.                 margin-top: 0px;   
  38. /**2处 padding-top:20px;**/   
  39.             }   
  40.             #oneright{   
  41.                 background-color:#ff7f50;   
  42.                 background-image: url(../img/right.jpg);   
  43.                 background-position:50% 80px;   
  44.                 background-repeat: no-repeat;   
  45.                 border:1px solid #000000;   
  46.                 width: 358px !important;   
  47.                 width: 380px;   
  48.                 height:1478px !important;   
  49.                 height:1500px;   
  50.                 float:right;   
  51.                 padding-left:20px;   
  52.                 padding-top: 20px;   
  53.             }   
  54.                
  55.             #oneright ol{   
  56. /**注意**/   
  57.                 margin-top: 0px;   
  58. /**2处 padding-top:20px;**/   
  59.             }   
  60.         </style>  
  61.     </head>  
  62.     <body>  
  63.         <div id="chileboy" align="center">  
  64.             <div id="oneboy">  
  65.                 <div id="oneleft" align="left">  
  66.                     <p>黄思宏测试</p>  
  67.                 </div>  
  68.                 <div id="oneright" align="left">  
  69.                     <ol>  
  70.                         <li>测试</li>  
  71.                         <li>测试</li>  
  72.                         <li>测试</li>  
  73.                     </ol>  
  74.                 </div>  
  75.             </div>  
  76.         </div>  
  77.     </body>  
  78. </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为多少,也是可以解决以上问题的。这个就要看你的需求来定了。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值