padding-top在IE,FF上的区别及矫正
<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为多少,也是可以解决以上问题的。这个就要看你的需求来定了。