DIV+CSS網站布局,如何兼容所有瀏覽器
分類:東莞網站設計  日期:2012-8-11  瀏覽:次  點擊返回
由于不同瀏覽器對于CSS解析結果不同,一段CSS代碼在不同的瀏覽器下顯示頁面效果不一致,因此就需要寫不同代碼兼容各種瀏覽器,在不同的瀏覽器中都能得到預期的頁面效果。這個針對不同的瀏覽器寫不同的CSS code的過程,就叫CSS hack。
 
CSS hack 的原理是不同的瀏覽器對CSS的支持及解析結果不一樣以及CSS中的優先級的關系。
 
每一行都有每一行的行規和技術說明,作為網站設計的人員最頭通莫過于用DIV+CSS這種流行的W3C標準的布局,因為它在不同的瀏覽器下,其顯示也是千差萬別的,這都是由于各個瀏覽器廠商的出品采用的技術標準不同所引起的,這也是讓人比較頭痛的所在,在IE下好好的,可能到了firefox、360 等下面全亂了,錯位了,如果您 是一位潛在客戶去瀏覽到這樣的企業網站,您有何感想?
 
因此作為東莞本土化網站制作公司的我們,如何保證在各個版本、廠商的瀏覽器下保證不會出錯位現象出現就值得我們深思,下面我們洪福科技就日常工作的一點經驗和大家分享,歡迎大家拍磚
 
一、FF下給 div 設置 padding 后會導致 width 和 height 增加, 但IE不會.(可用!important解決)
 
二、居中問題.
1).垂直居中.將 line-height 設置為 當前 div 相同的高度, 再通過 vetical-align: middle.( 注意內容不要換行.)
2).水平居中. margin: 0 auto;(當然不是萬能)
 
三、 若需給 a 標簽內內容加上 樣式, 需要設置 display: block;(常見于導航標簽)
 
四、FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.
 
五、 ul 標簽在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導航標簽和內容列表)
 
六、 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應.
 
七、關于手形光標. cursor: pointer. 而hand 只適用于 IE.
 
八、萬能 float 閉合(非常重要!) 可以用這個解決多個div對齊時的間距不對,給需要閉合的div加上 class=”clearfix” 即可,屢試不爽.
 
九、簡單介紹在IE6、IE7和Firefox(以下簡稱FF)下的CSS hack的寫法。
 
區分IE(包括ie6和ie7)和FF
 
div.bg_color{
    background:orange;*background:blue;
}
 
在IE下是顯示blue,在FF下是orange。IE可以識別CSS中的*,由于CSS得優先級關系,在IE中顯示的是最后設置的blue,而FF由于不能識別*,對于帶*的屬性不做解析。
 
區分IE6和IE7
 
div.bg_color{
    background:orange !important;background:blue;
}
 
在IE6顯示為blue,IE7下為orange,因為IE6不支持!important而IE7支持。
 
區別FF,IE7,IE6:
 
1. background:orange; *background:green !important; *background:blue;
 
2. background:orange; *background:green; _background:blue;
 
不管用哪種方法書寫,順序都是firefox的寫在前面,IE7其次,IE6的寫在最后面。希望您看了以上文章對你寫兼容性良好的的CSS有很大幫助。
 
我們還會陸續的分享有關CSS 不兼容的文章,歡迎大家關注
 
附CSS hack表一張,希對您有幫助

CSS hack對照表


域名注冊 |  企業郵箱 |  虛擬主機 |  網站設計 |  網站建設報價 |  網站推廣 |  網站建設 |  聯系我們 |  Sitemap

洪福科技是東莞正規網頁設計公司,提供東莞建站、網絡推廣、企業郵箱、域名注冊和虛擬主機服務,專注于中小企業網站建設和網絡營銷服務,共享網絡開放平臺!

地址:廣東省東莞市鴻福東路紅棉路24號  郵編:523000  電話:0769-3321 8176   傳真:0769-8987 5073    郵箱:[email protected]

Copyright(?) 2009-2013 東莞市洪福科技有限公司 All Rights Reserved. 版權所有  粵ICP備09061858號  

为什么开心农场不能玩