天天看點

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>

顯示差別

web前端開發中浏覽器相容問題(二)
web前端開發中浏覽器相容問題(二)

7.高度不适應問題

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

例:    

web前端開發中浏覽器相容問題(二)
web前端開發中浏覽器相容問題(二)

• 解決辦法:在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來得簡單.