DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DIV+CSS在IE6、IE7、Firefox下的使用技巧(4)
DIV+CSS在IE6、IE7、Firefox下的使用技巧(4)
編輯:CSS詳解     
技巧八:DIV浮動

IE文本產生3象素的bug左邊對象浮動,右邊采用外補丁的左邊距來定位,右邊對象內的文本會離左邊有3px的間距.

  1. #box{
  2. float:left;
  3. width:800px;
  4. }
  5. #left{float:left;
  6. width:50%;
  7. }#right{
  8. width:50%;
  9. }
  10. *Html#left{
  11. margin-right:-3px;//這句是關鍵}
  12. Html代碼

技巧九:屬性選擇器(這個不能算是兼容,是隱藏CSS的一個bug)

p[id]{}div[id]{}
這個對於IE6.0和IE6.0以下的版本都隱藏,Firefox和Opera作用屬性選擇器和子選擇器還是有區別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標簽中有id的都是同樣式的.

技巧十:IE捉迷藏的問題

當div應用復雜的時候每個欄中又有一些鏈接,DIV等這個時候容易發生捉迷藏的問題。
有些內容顯示不出來,當鼠標選擇這個區域是發現內容確實在頁面。
解決辦法:對#layout使用line-height屬性或者給#layout使用
固定高和寬。頁面結構盡量簡單。

技巧十一:高度不適應

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

  1. CSS:
  2. #box{
  3. background-color:#eee;
  4. }
  5. #boxp{
  6. margin-top:20px;
  7. margin-bottom:20px;
  8. text-align:center;
  9. }

解決方法:在P對象上下各加2個空的div對象CSS代碼:

  1. .1{height:0px;overflow:hidden;}

或者為DIV加上border屬性。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved