close

CSS兼容性技巧大全(二) 

 

 

http://www.inspirr.com 
 

 


 

 

 

  6.DIV浮動IE文本產生3象素的bug

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

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

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

  #right{ width:50%;}

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

  

 

  

 

  

 

  

 

  7.IE捉迷藏的問題

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

  有些內容顯示不出來,當鼠標選擇這個區域是發現內容確實在頁面。 解決辦法:對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結構盡量簡單。

  8.float的div閉合;清除浮動;自適應高度

  ①例如:<#div id=”floatA” ><#div id=”floatB” ><#div id=”NOTfloatC” >這里的NOTfloatC并不希望繼續平移,而是希望往下排。(其中floatA、floatB的屬性已經設置為float:left;)

  這段代碼在IE中毫無問題,問題出在FF。原因是NOTfloatC并非float標簽,必須將float標簽閉合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之間加上 <#div class=”clear”>這個div一定要注意位置,而且必須與兩個具有float屬性的div同級,之間不能存在嵌套關系,否則會產生異常。并且將clear這種樣式定義為為如下即可: .clear{ clear:both;}

  ②作為外部 wrapper 的 div 不要定死高度,為了讓高度能自動適應,要在wrapper里面加上overflow:hidden; 當包含float的box的時候,高度自動適應在IE下無效,這時候應該觸發IE的layout私有屬性(萬惡的IE啊!)用zoom:1;可以做到,這樣就達到了兼容。

  例如某一個wrapper如下定義:

  .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

  ③對于排版,我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的float div后面做一個統一的背景,譬如:

  

 

  

 

  

 

  

 

  

 

  比如我們要將page的背景設置成藍色,以達到所有三欄的背景顏色是藍色的目的,但是我們會發現隨著left center right的向下拉長,而page居然保存高度不變,問題來了,原因在于page不是float屬性,而我們的page由于要居中,不能設置成 float,所以我們應該這樣解決

  

 

  

 

  

 

  

 

  

 

  

 

  

 

  再嵌入一個float left而寬度是100%的DIV解決之

  出處:web前端寒風

  inspirr:bluehearts

 

 

   

 

  Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |

arrow
arrow
    文章標籤
    網站設計 互動媒體
    全站熱搜
    創作者介紹
    創作者 inspirr 的頭像
    inspirr

    inspirr

    inspirr 發表在 痞客邦 留言(0) 人氣()