許多網頁設計師常常以負數的margin來定位Html元素的位置,目的是讓該元素與圖形對齊,IE7及IE8對於負數的解釋有蠻大的差異性。
程式4
- "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
- <HtmlXMLnsHtmlXMLns="http://www.w3.org/1999/xHtml">
- <head>
- <title>< span>title>
- < span>head>
- <body>
- <divstyledivstyle="height:100px;width:200px;border:solid1pxblack">
- <divstyledivstyle="background-color:Red;margin:-5px6px7px8px">
- <ahrefahref="http://www.hinet.Net">Hinet< span>a>
- < span>div>
- < span>div>
- < span>body>
- < span>Html>
由比較圖可看出,IE7遭遇負數時,並不會移出DIV的范圍,而IE8會,在筆者撰寫本文之時,大多數的不相容IE8網頁錯誤都源自於此。
4、TableWithBorderStyle
元素的Layout在每個浏覽器上都會有些許差異的表現,下面的代碼是一個在IE7及IE8上呈現相異的范例。Table
- "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
- <HtmlXMLnsHtmlXMLns="http://www.w3.org/1999/xHtml">
- <head>
- <title>< span>title>
- < span>head>
- <body>
- <tablestyletablestyle="border:double7pxgreen">
- <tr>
- <tdstyletdstyle="border:double1pxgreen">a< span>td>
- <tdstyletdstyle="border:double1pxgreen">a< span>td>
- <tdstyletdstyle="border:double1pxgreen">a< span>td>
- < span>tr>
- <tr>
- <tdstyletdstyle="border:double1pxgreen">a< span>td>
- <tdstyletdstyle="border:double1pxgreen">a< span>td>
- <tdstyletdstyle="border:double1pxgreen">a< span>td>
- < span>tr>
- <tr>
- <tdstyletdstyle="border:double1pxgreen">a< span>td>
- <tdstyletdstyle="border:double1pxgreen">a< span>td>
- <tdstyletdstyle="border:double1pxgreen">a< span>td>
- < span>tr>
- < span>table>
- < span>body>
- < span>Html>
很明顯的,IE7的border寬度計算比IE8高,不過由於這是整體偏移,加上我們很少會設定太大的border寬度,影響程度幾乎等於0。