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

青旅半醒 2022-06-04 00:40 146阅读 0赞

Html代码 [ ![复制代码][icon_copy.gif]][_icon_copy.gif] ![收藏代码][icon_star.png]![spinner.gif][]

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>在测试文字的上下还有类似内补丁类的边框，请看下图  
    ![60a3c7b7-0776-3417-ade7-7133a037d357.jpg][]  
    所以，要把这个去掉就行了。在<p>标签的样式上，写多一个margin-top:0px；这样就解决在FF上<p>被下移的问题了。或者说，不在DIV上设置padding-top多少，而是改成在<p>中设置它的外补丁，也就是margin-top为多少，也是可以解决以上问题的。这个就要看你的需求来定了。

[icon_copy.gif]: http://leaphong.iteye.com/images/icon_copy.gif
[_icon_copy.gif]: http://leaphong.iteye.com/blog/869534#
[icon_star.png]: http://leaphong.iteye.com/images/icon_star.png
[spinner.gif]: /images/20220604/3cb374b6a0fc4ac8ac1ca7514ee7e7ed.png
[60a3c7b7-0776-3417-ade7-7133a037d357.jpg]: /images/20220604/bcd0038fbc91421fb449b0de690a3b5d.png