CSS+DIVweb排版的定義及常見的浏覽器相容問題

  DIV+CSS是網站标準（或稱“WEB标準”）中常用術語之一，通常為了說明與HTML網頁設計語言中的表格（table）定位方式的差別，因為XHTML網站設計标準中，不再使用表格定位技術，而是采用DIV+CSS的方式實作各種定位。CSS是英語Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現 HTML 或 XML 等檔案式樣的計算機語言。

 　盡管DIV+CSS具有一定的優勢，不過現階段CSS+DIV網站建設存在的問題也比較明顯，主要表現在：

　　第一，對于CSS的高度依賴使得網頁設計變得比較複雜。相對于HTML4.0中的表格布局（table），CSS+DIV盡管不是高不可及，但至少要比表格定位複雜的多，即使對于網站設計高手也很容易出現問題，更不要說初學者了，這在一定程度上影響了XHTML網站設計語言的普及應用。

　　第二，CSS檔案異常将影響整個網站的正常浏覽。CSS網站制作的設計元素通常放在幾個l外部檔案中，這一個或幾個檔案有可能相當複雜，甚至比較龐大，如果CSS檔案調用出現異常，那麼整個網站将變得慘不忍睹。

　　第三，對于CSS網站設計的浏覽器相容性問題比較突出。基于HTML4.0的網頁設計在IE4.0之後的版本中幾乎不存在浏覽器相容性問題，但CSS+DIV設計的網站在IE浏覽器裡面正常顯示的頁面，到火狐浏覽器（FireFox ）中卻可能面目全非（這也是為什麼建議網絡營銷人員使用火狐浏覽器的原因所在 ）。CSS+DIV還有待于各個浏覽器廠商的進一步支援。

　　第四，CSS+DIV對搜尋引擎優化與否取決于網頁設計的專業水準而不是CSS+DIV本身。CSS+DIV網頁設計并不能保證網頁對搜尋引擎的優化，甚至不能保證一定比HTML網站有更簡潔的代碼設計，何況搜尋引擎對于網頁的收錄和排序顯然不是以是否采用表格和CSS定位來衡量，這就是為什麼很多傳統表格布局制作的網站在搜尋結果中的排序靠前，而很多使用CSS及web标準制作的網頁排名依然靠後的原因。因為對于搜尋引擎而言，網站結構、内容、相關網站連結等因素始終是網站優化最重要的名額。

   其中div+css中浏覽器的相容問題是有些設計師最頭痛的事情，例如：Mozilla Firefox設定 padding 後, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width。在排版時要注意就是哪些是哪個浏覽器所專用的哪些在其他浏覽器中不會出現效果，這樣版面就會在各個浏覽器中顯示正常了。例如：所有浏覽器 通用height: 100px;IE6 專用 _height: 100px;前者的使用的話在IE6 FF浏覽器中測試内容多了就不會向下撐，内容就會給隐藏掉。後者在IE6裡測試，在内容多的情況下它還是會顯示出來，在IE其他的浏覽器中測試也會顯示内容。但是在FF中就會隐藏。

div+css樣式IE與Firefox常見相容問題：

  1、DOCTYPE 影響 CSS 處理

  2、FF：div 設定 margin-left， margin-right 為 auto 時已經居中，IE 不行

  3、FF: body 設定 text-align 時， div 需要設定 margin: auto(主要是 margin-left，margin-right) 方可居中

  4、FF: 設定 padding 後， div 會增加 height 和 width， 但 IE 不會， 故需要用 !important 多設一個 height 和width

  5、FF: 支援 !important， IE 則忽略， 可用 !important 為 FF 非凡設定樣式

  6、div 的垂直居中問題: vertical-align:middle; 将行距增加到和整個DIV一樣高 line-height:200px; 然後插入文字，就垂直居中了。缺點是要控制内容不要換行

  7、cursor: pointer 可以同時在 IE FF 中顯示遊标手指狀， hand 僅 IE 可以

  8、FF: 連結加邊框和背景色，需設定 display: block， 同時設定 float: left 保證不換行。參照 menubar， 給 a 和 menubar 設定高度是為了避免底邊顯示錯位， 若不設 height， 可以在 menubar 中插入一個空格。

  9、在mozilla firefox和IE中的BOX模型解釋不一緻導緻相差2px解決方法：div{margin:30px!important;margin:28px;}

注重：這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識别，但别的浏覽器可以識别。是以       在IE下其實解釋成這樣： div{maring:30px;margin:28px} 重複定義的話按照最後一個來執行，是以不可以隻寫      margin:XXpx!important;

  11、ul标簽在Mozilla中預設是有padding值的，而在IE中隻有margin有值是以先定義ul{margin:0;padding:0;} 就能解決大部分問題

div+css樣式常見問題解決發法:

  1.margin加倍的問題。設定為float的div在ie下設定的margin會加倍。這是一個ie6都存在的問題。解決方案是在這個div裡面加上display:inline;

　2.關于容器的包涵關系很多時候，尤其是容器内有平行布局，例如兩、三個float的div時，寬度很輕易出現問題。在IE中，外層的寬度會被内層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。

　3.關于高度的問題假如是動态地添加内容，高度最好不要定義或者設定最小高度。浏覽器可以自動伸縮，然而假如是靜态的内容，高度最好定好，但是有個不好之處是容器内容多了過後容器不會随之撐長撐大。

　4.!important 的使用;假如實在沒有辦法解決一些細節問題，可以用這個方法.FF對于"!important"會自動優先解析，然而IE則會忽略，IE7會識别。