DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> IE7和IE8的CSS樣式八大差異(2)
IE7和IE8的CSS樣式八大差異(2)
編輯:CSS詳解     
3、負數margin

許多網頁設計師常常以負數的margin來定位Html元素的位置,目的是讓該元素與圖形對齊,IE7及IE8對於負數的解釋有蠻大的差異性。
程式4

  1. "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
  2. <HtmlXMLnsHtmlXMLns="http://www.w3.org/1999/xHtml">
  3. <head>
  4. <title>title>
  5. head>
  6. <body>
  7. <divstyledivstyle="height:100px;width:200px;border:solid1pxblack">
  8. <divstyledivstyle="background-color:Red;margin:-5px6px7px8px">
  9. <ahrefahref="http://www.hinet.Net">Hineta>
  10. div>
  11. div>
  12. body>
  13. Html>

由比較圖可看出,IE7遭遇負數時,並不會移出DIV的范圍,而IE8會,在筆者撰寫本文之時,大多數的不相容IE8網頁錯誤都源自於此。

4、TableWithBorderStyle

元素的Layout在每個浏覽器上都會有些許差異的表現,下面的代碼是一個在IE7及IE8上呈現相異的范例。Table

  1. "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
  2. <HtmlXMLnsHtmlXMLns="http://www.w3.org/1999/xHtml">
  3. <head>
  4. <title>title>
  5. head>
  6. <body>
  7. <tablestyletablestyle="border:double7pxgreen">
  8. <tr>
  9. <tdstyletdstyle="border:double1pxgreen">atd>
  10. <tdstyletdstyle="border:double1pxgreen">atd>
  11. <tdstyletdstyle="border:double1pxgreen">atd>
  12. tr>
  13. <tr>
  14. <tdstyletdstyle="border:double1pxgreen">atd>
  15. <tdstyletdstyle="border:double1pxgreen">atd>
  16. <tdstyletdstyle="border:double1pxgreen">atd>
  17. tr>
  18. <tr>
  19. <tdstyletdstyle="border:double1pxgreen">atd>
  20. <tdstyletdstyle="border:double1pxgreen">atd>
  21. <tdstyletdstyle="border:double1pxgreen">atd>
  22. tr>
  23. table>
  24. body>
  25. Html>

很明顯的,IE7的border寬度計算比IE8高,不過由於這是整體偏移,加上我們很少會設定太大的border寬度,影響程度幾乎等於0。

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