新疆遠璨網絡

DIV+CSS建站對瀏覽器的兼容性問題和注意事項

發布時間:2019-09-26 10:03:56   信息來源:烏魯木齊企業網站制作   發布作者:遠璨網絡


    使用DIV+CSS構架好處不少,但也確實存在一些問題,現在讓網頁設計師最頭疼的事莫過于DIV+CSS對瀏覽器的兼容性了,可能你用慣了IE6,做出來的東西沒感覺到有多大異常,但是把同樣的東西放到IE7里去看的話,就會發現很多問題,如果放到火狐瀏覽器里去看,結果更不盡人意。

    一個頁面從制作的開始就決定了他要使用的瀏覽器解析css模式,瀏覽器模式的不同,就造成了各個瀏覽器對頁面顯示的差異。瀏覽器解析css有兩種模式,quirks mode和strict mode,目前正在使用的瀏覽器這兩種模式都支持,在doctype聲明中, 沒有使用DTD聲明或者使用HTML4以下(不包括HTML4)的DTD聲明時,基本所有的瀏覽器都是使用quirks mode呈現,其他的則使用strict mode解析。

    這兩種模式最大的不同就是提現在對盒模式的解釋上。什么是盒模式?這是針對塊級元素說的,這里簡單說一下,說白了就是把塊級元素想像成一個裝東西的盒子,而margin,padding,border,width這些css屬性構成了盒模式。而區別就是產生在width屬性上。

    在strict mode中:
    width是內容寬度 ,也就是說,元素真正的寬度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;

    在quirks mode中:
    width則是元素的實際寬度 ,內容寬度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)

    其他要注意的事項:
    ·內聯元素 ,例如<a>、<span>等,定義上下邊界不會影響到行高(line-height),內聯元素距離上一行元素的距離由行高決定,而不是填充或邊界。 注2. 內聯元素(display: inline) 內聯元素不需要在新行內顯示,而且也不強迫其后的元素換行,如a、em、span等都為內聯元素。內聯元素可以為任何其他元素的子元素。
    ·浮動元素(無論左或者右浮動)邊界不壓縮 ,且若浮動元素不聲明寬度,則其寬度趨向于0,即壓縮到其內容能承受的最小寬度。
    ·如果盒中沒有內容,則即使定義了寬度和高度都為100%,實際上只占0% ,因此不會被顯示,此點在采取層布局的時候需特別注意。
    ·邊界值可為負,其顯示效果各瀏覽器可能不相同 。
    ·填充值不可為負 。
    ·邊框默認的樣式(border-style)為不顯示(none)

    下面來說說IE6,IE7及FF火狐瀏覽器的區別和兼容方法:
1. IE7與IE6相比, 有多達200多處改進, 但它們都是在Strict Mode下實現的, 即在頁首聲明DocType為XHTML Transitional, XHTML Strict等. 而在Quirks Mode下, IE7和IE6別無二致。所以為了更好的兼容,盡量聲明DocType,采用Strict Mode進行制作。
2. IE7支持Alpha通道的PNG圖片, 但是這些Alpha通道圖片在IE6下還是不能正常顯示的,所以還是盡量使用透明GIF圖片。
3. IE7盒子模型改變了:盒子對于"overflow"使用了"visible"默認值,所以對于子元素尺寸大于父元素尺寸時, IE7會和Firefox一樣將子元素露出于父元素之外顯示, 而不是像IE6那樣把父元素撐大了包含子元素.把頁面設置成"overflow:visible"即可。
4. 設置為float的div在ie下設置的margin會加倍。這是一個ie6存在的bug。解決方案是在這個div里面加上"display:inline"。
5. IE和火狐對'width'定義的不同:
     Firefox中:容器占的寬度=內容寬度+padding寬度+border寬度;
     IE中:內容寬度=您定義的容器寬度(Internet Explorer 'width')-padding寬度-border寬度
     (Internet Explorer 'width'則是指整個容器的寬度,包括內容,padding ,border)

6. css布局的居中問題:FF火狐里設置margin-left, margin-right 為 auto 時已經居中, IE則設置body {TEXT-ALIGN: center;} 才行
7. FF火狐設置padding后, div會增加height和width, 但IE不會, 故需要用 !important 多設一個height和width
8. 在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法:div{margin:30px!important;margin:28px;}
9. ul標簽在FF火狐中默認是有padding值的,而在IE中只有margin有值所以先定義ul{margin:0;padding:0;}
10.終結解決方法:
    (1)!important:FF火狐和IE7對于"!important"會自動優先解析,IE6則忽略,可用!important為FF火狐和IE7單獨設置樣式,不影響IE6的顯示,值得注意的是,一定要將xxxx !important 這句放置在另一句之上。
       示例:div{margin:30px!important;margin:15px;} //在FF火狐和IE7中margin:30px,在IE6中margin:15px;
    (2)由于FF火狐和IE7都支持"!important",而二者之間也存在差異,所以有時也會出現一些小問題,針對IE7可以使用使用"*+html",
       示例:#example { color: #333; } /* FF火狐下字體顏色顯示為#333 */
             * html #example { color: #666; } /* IE6下字體顏色顯示為#666 */
             *+html #example { color: #999; } /* IE7下字體顏色顯示為#999 */

    其他注意事項:

1. float的div一定要閉合,即清除浮動
   示例:(其中floatA、floatB的屬性已經設置為float:left;)
         <div>
           <div id="floatA"></div>
           <div id="floatB"></div>
           <div id="NOTfloatC"></div>
         </div>
   這里的NOTfloatC并不希望繼續平移,而是希望往下排。這段代碼在IE中毫無問題,問題出在FF。原因是NOTfloatC并非float標簽,必須將float標簽閉合。
   所以得在<div id="floatB"></div>后邊加清除浮動<div class="clear"></div>
   定義如下.clear{clear:both;}
           
2. 注意margin加倍的問題
   現在DIV+CSS布局里用的最多的要數margin和padding了(為了兼容性都盡量少用),設置為float浮動后的div在ie下設置的margin會加倍,所以要在這個div里面加上display:inline;
   示例:<div id="FloatA"></div>
         相應的css為
         #FloatA{
             float:left;
             margin:5px;/*IE下理解為10px*/
             display:inline;/*IE下再理解為5px*/
          }

說了這么多,歸根結底還是CSS的解釋問題,所以在以后制作DIV+CSS頁面時要遵循W3C標準,聲明doctype,讓瀏覽器按strict mode模式解析CSS,時刻注意IE6、IE7及火狐瀏覽器的差異,就會避免很多兼容性問題,做出更好的作品來

烏魯木齊網站制作、烏魯木齊網站推廣、烏魯木齊網站排名、網站開發、新疆網站建設、新疆網站推廣、新疆網站排名找遠璨網絡,誠信合作共贏的態度,為你提供更多的網站建設服務!咨詢電話:0991-4549085

服務支持

我們珍惜您每一次在線詢盤,有問必答,用專業的態度,貼心的服務。

讓您真正感受到我們的與眾不同!

合作流程

網站制作流程從提出需求到網站制作報價,再到網頁制作,每一步都是規范和專業的。

常見問題

提供什么是網站定制?你們的報價如何?等網站建設常見問題。

售后保障

網站制作不難,難的是一如既往的熱情服務及技術支持。我們知道:做網站就是做服務,就是做售后。

3d今晚预测一个金胆码