web前端開發中瀏覽器兼容問題（二）

6.DIV浮動IE文本產生3px的問題

• 左邊對象浮動，右邊採用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距.    

#box  {   float:left; width:800px;  }   

#left   {   float:left; width:50%;  }   

#right {   width:50%;  }

*html  #left{   margin-right:-3px;   //這句是關鍵  }    

 

<div id="box">

    <div id="left"></div>

<div id="right"></div>

</div>

顯示區別

  

 

  

7.高度不適應問題

• 高度不適應是當內層對象的高度發生變化時，外層高度不能自動進行調節，特別是當內層對象使用了margin或padding時。

例：    

    

  

    

 

• 解決辦法：在P對象先後各加一個div對象，對這個div對象添加一個border屬性便可。

8.IE圖片下有空隙產生問題

• 解決這個BUG的方法也有不少,能夠是改變html的排版,或者設置img 爲display:block 或者設置vertical-align 屬性爲 vertical-align:top | bottom |middle |text-bottom 均可以解決.

9.對齊文本與文本輸入框問題

加上 vertical-align:middle;

<style type="text/css">  

      input {      

width:200px;      

height:30px;      

border:1px solid red;      

vertical-align:middle;

     }

</style>

10.web標準中id與class有區別嗎

• WEB標準中是不允許重複ID的,好比 div id="abc"   不允許重複2次,而class 定義的是類,理論上能夠無限重複, 這樣須要屢次引用的定義即可以使用 

• 屬性的優先級:  ID 的優先級要高於class

• 方便JS等客戶端腳本,若是在頁面中要對某個對象進行腳本操做,那麼能夠給他定義一個ID,不然只能利用遍歷頁面元素加上指定特定屬性來找到它,這是相對浪費時間資源,遠遠不如一個ID來得簡單.