【CSS】IE6的double margin顯示問題

我們經常會發現有些部落格在IE6中顯示不正常,其原因可能是double margin。

一般我們在做網頁LAY OUT時會將DIV做以下分布,這用在最IE7之後的瀏覽器都是沒問題的。

但是margins單獨使用在Float語法裡,在IE6的顯示裡可能會出現以下狀況:

為什麼要關懷IE6?

請參考以下資料,IE6在2010市佔的瀏覽器使用率有4.8%,在2009年12月市佔率為10.9%,這就是我們要關懷那些IE6使用者的原因。
網頁:http://www.w3schools.com/browsers/browsers_stats.asp

解決方式如下:

1.) Display Inline

有些網頁設計師建議在css的float區塊裡使用[ display:"inline;" ]這個語法,參考檔案:
http://10steps.sg/wp-content/uploads/article109/solution1.zip

 

2.) IF Statement

在IE6中會發生問題的不是只有double margin,你可以為IE6創建一個獨立的CSS,並使用以下語法在HTML裡:

參考檔案:
http://10steps.sg/wp-content/uploads/article109/solution2.zip

3.) Padding Property

有些顯示問題可以使用PADDING來解決,參考檔案:
http://10steps.sg/wp-content/uploads/article109/solution3.zip

最後請下載以下軟體IETESTER,即使在沒有IE6的測試環境裡也可以看到網頁在IE6的顯示方式,下載網頁:
http://www.my-debugbar.com/wiki/IETester/HomePage


益盛科技 des13.com - 客製化軟體開發 × AI 系統整合方案

益盛科技|客製化開發 × AI
 
13 年軟體開發經驗,1000+ 專案實戰
 
核心服務:客製化軟體、網站開發、SEO 等
 
專注重點:重視架構、設計品質與商業價值
 
技術方向:導入AI 應用與自動化流程

聯絡資訊

LINE @igodos 加 LINE 好友
406台中市北屯區文心路四段955號11樓之2
(需預約諮詢)
social line social fb social ig
LINE