DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 解決Firefox、IE6、IE7的CSS樣式兼容問題(3)
解決Firefox、IE6、IE7的CSS樣式兼容問題(3)
編輯:CSS詳解     
8DIV浮動IE文本產生3象素的bug

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

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

Html代碼

  1. <DIVidDIVid=box>
  2. <DIVidDIVid=left></DIV>
  3. <DIVidDIVid=right></DIV>
  4. </DIV>

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

p[id]{}div[id]{}

p[id]{}div[id]{}

這個對於IE6.0和IE6.0以下的版本都隱藏,FF和Opera作用

屬性選擇器和子選擇器還是有區別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標簽中有id的都是同樣式的.

10IE捉迷藏的問題

當div應用復雜的時候每個欄中又有一些鏈接,DIV等這個時候容易發生捉迷藏的問題。

有些內容顯示不出來,當鼠標選擇這個區域是發現內容確實在頁面。

解決辦法:對#layout使用line-height屬性或者給#layout使用固定高和寬。頁面結構盡量簡單。

11高度不適應

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

margin或paddign時。例:

  1. <dividdivid=”box”>
  2. <p>p對象中的內容</p>
  3. </div>

CSS:

  1. #box{background-color:#eee;}
  2. #boxp{margin-top:20px;margin-bottom:20px;text-align:center;}

解決方法:在P對象上下各加2個空的div對象CSS代碼:.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。

注:IE都能識別*;標准浏覽器(如FF)不能識別*;

IE6能識別_,其他不能

IE6能識別*,也能識別!important,但不能把它識別成優先

IE7能識別*,也能識別!important;

FF不能識別*,但能識別!important;

文章來源:Div-CSS.net設計網參考:http://www.div-CSS.Net/div_CSS/topic/?id=7633

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