Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs-筆記整理

本篇文章原文出處：http://www.pmob.co.uk/temp/onepxgap.ht
Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
作者: Benjamin/ September15,2009
0927筆記整理 / Teresa


S1. Strategies:
a.IE6市佔率目前也還有25.25%。
b.plan your design and keep it simple(如標題所言)
c.使用正確的Doctype，建議以下這幾種類型

1.Html 4.01 Strict
2.HTML 4.01 Frameset
3.HTML 4.01 Transitional
4.XHTML 1.0 Strict
5.XHTML 1.0 Frameset
6.XHTML 1.0 Transitional (expression web3 內建文件型態)
7.XHTML 1.1

d.驗證原始碼
XHTML與CSS
e.先開發標準規則(Standards-Compliant)的瀏覽器例如 Firefox, Opera, Safari, and Chrome,其次才是IE6/7,如此才能明確分隔IE瀏覽器的獨特性。未來覺得不合適也可以直接移除。

f.使用Progressive enhancement

意即確認最基本的功能對每個使用者來說是可用的，接著在進行更高階的改良。
P.E的原本意涵是指不用javascript去開發app,
IE6不支援CSS3 CSS2部分功能, HTML5
延伸閱讀：
Understanding Progressive Enhancement
Progressive Enhancement With CSS
Progressive Enhancement: What It Is, And How To Use It?


g.Css reset rule,

這個很有用。
本文舉例: body, div, ul, ol, h1, h2, h3, h4, h5, h6, form, fieldest, inutp, p, th, td,{margin:0; padding:0;}
延伸閱讀:
YUI CSS Reset
Eric Meyer's Reset Reloaded
Eric A. Meyer所寫的CSS大全，我這週末才剛K，原來他有寫Reset的檔案。
CSS大全有很多基本關鍵的建立，很受用。

h.使用JavaScript的framework
例如以下
MooTools
jQuery
ProtoType with Scriptaculous
Dojo
Ext JS

i.使用JavaScript IE Fix Script
j.Debug IE
用 Firebug and Web Developer Toolbar兩套工具去檢測
或者使用 IETester , IETester有DebugBar
也是頗為好用的一套工具。

k.如何將IE6獨立出來
大概介紹而已 用CSS語法選擇器/或者javascript

l.使用條件式comments
lte 包含ie6與以下版本 <= IE6
gt 不含ie6 以上版本 >IE6
gte 包含ie6與以上版本 >= IE6
為特定版本的瀏覽器建立Css/javascript
P.S條件式方法較其他HACK方法來的好

m.指定ie6 css選擇器
如果不想使用條件式的stylesheets(如上)則Css選擇器是另一個針對選擇
文中舉例
First, the HTML:
class="header">Some Header Text Here
Now the CSS:
/*This line for IE6*/
.content {color:red;}
/*This line for everyone else, using the child selector syntax*/
div>p .content {color:blue;}

恩，這段寫得其實有點奇怪，因為在html裡舉例的是.header
Css卻用.content來舉例，所以之中的關連是...??
但總而言之，就是說ie6不支援子選擇器的宣告
子選擇器就是Child selector使用的是>的符號
是用來指定組件成為其他組件直接的子組件
有點熬口....意思就是所有p 只要符合div的子組件 而非次子組件 就符合這個條件。
另外，子選擇器的宣告要在ie6的css宣告之後，
延伸閱讀:
CSS Browser Compatibility Chart
Master Browser Compatibility Chart

n.如何用javascript去判斷ie6
延伸閱讀
Quirksmode's Browser Object
MooTools' Browser Object
jQuery's support utility

S2.
O.影像部分
IE6不支援透明影像的部份，這邊有幾項解決辦法。
1.最簡單的是將其存為PNG8,將透明度套在上面。如果是使用ADOBE的FIREWORKS則可以使用Save As > Save as type > Flattened PNG > Options > Alpha Transparency
這個程序。
這邊有幾個利用javascript來修復透明度問題的延伸閱讀
MooTools' FixPNG
jQuery PNG fix
IE PNG Fix by Twin Helix
TweakPNG
DD_belatedPNG
現在發現JQuery 真的是個好用的東西。不過MooTools看起來也是滿簡單操作的。
此外，IE6也不支援圓角，但這邊有解決的方法。
CSS Rounded Corners Menus
看起來有點複雜....不過有的是可以自動透過程式產生很多div的圓角效果
如何解決flickering背景圖?
CSS sprites 很酷的技術..這邊有更多詳細的介紹
解密CSS Sprites: 技巧 工具 教程
因為ie6並非每次都能夠抓取背景圖然後重載，固有javascript可以解決此問題
寫這行
document.execCommand("BackgroundImageCache",false,true);
其他解決的方法如下
Minimize Flickering CSS Background Images in IE6

S3.
p.終於到了Layout的部分了
1.了解 hasLayout
haslayout是微軟的的一個屬性概念，少了長度或者寬度的宣告會導致許多bugs.
延伸閱讀
"HasLayout" Overview from Microsoft

2.IE6的盒子模式與double margin問題
css中的寬度計算，在IE6裡面不包含padding 跟border
所以以下
div#AAA {
width: 100px; border: 2px solid black; padding: 10px; }在ie6裡面會被認定為寬度是100px 在其他瀏覽器則被認為是124px
其他Bug,如float為left而margin-left設為20px則會變成double margin針對第一項的解決方式延伸參考
( IE CSS Bugs that'll get you every time)

解決方法整理:
side-step的作法阿!!!退一步海闊天空!!
在box model盡量不要使用padding, 或者有內容在box裡時，使用element然後調整p元素的padding值。補充:或用hack !important ie6不吃這套但其他吃，所以可以作為調整的方法。
double margin
div#box { float: right; margin-right: 20px; }
IE6會將20px 變成40px;

這個也很阿Q,就是不設margin, 改設padding總可以吧!!這不會影響padding但會影響margin....其次，可以增加display:inline;來消除double margin的問題。但某些人建議第一種方法較為妥當。

3.Min-width, Min-height的問題
IE6不支援min Width/ Min Height, IE6將height預設為min-height.
但這邊有個hack Min-Height Fast Hack
ps.剛仔細看了一下，其實也是用!important的hack
文中舉例
/*Works in all browsers*/
#container {min-height:200px; height:auto !important; height:200px;}
/*For IE6*/
#container {min-height:200px; height:200px;}
/*For all other browsers*/
html>body #container { height:auto;}
因為ie6不支援!improtant與子選擇器，所以這兩個他都會忽略，但對於其他瀏覽器來講這兩個會override之前的宣告，so, 很好用耶!!

4.Max Height
使用特定CSS的expression或者使用JavaScript去完成。
有寫，但我有看沒有懂ORZ

5.100% Height
直接看文中範例比較清楚，子組件設100%,parent一定要設寬度。
/*100% height of the parent element for IE6*/
#parent {height:500px;}
#child {height:100%;}
/*100% of the page length for IE6*/
html, body {height:100%;}
#fullLength {height:100%;}

6.清除float
範例是加上overflow:auto;的屬性
這邊有個大前提!!!
必須要加上寬度:100%;或其他指定寬度,
overflow:auto才包的住有float的子組件
且可能造成不需要出現的捲軸(雖然有overflow:hidden的補救)
延伸閱讀
Clearing Floats
Simple Clearing of Floats

7.float drop
很常遇到的問題
受用的範例，請參考下面連結。

Internet Explorer 6 and the Expanding Box Problem
文中建議：使用自動斷行word-wrap:break-word
或者overlfow:hidden;
不過兩者都有其缺點，使用自動斷行並不符合w3C的標準規範
使用overflow會隱藏某些內容。所以要適當衡量彼此的用法。

8.IE6 Peekaboo/Guillotine Bug
使用height:0.1%;解決/*fix for ie peekaboo bug*/

9.使用absoulte 的element會有1px gap的誤差
因為四捨五入的運算，解決方法有使用偶數的數值,而避免使用奇數數值來設定
下面有相當清楚的圖示說明
IE6 1px gap on absolute elements
10.3 pixel bug fix for Internet Explorer 6
有點複雜的解決方式，總之讓左右兩欄加上display:inline;
之後左右兩欄各加上margin-left, margin-right:-3px;
最後在中間一欄加上margin-left, margin-right:3px;
其實這我也有點不是很懂!之後要研究!

11.overflow bug,
加上position:relative的方法

12.其他bug
overflow bug
The Staircase Bug 常常做網頁nav會碰到，解決方法為li加上display:inline;
Fixing the IE6 Whitespace Bug
(看到後來有點無力...)


13.其他延伸閱讀
The Definitive Guide to Taming the IE6 Beast
IE6 Peekaboo Bug
hasLayout.net
CSS For IE6: 6 Common Problems And Fast Ways To Fix Them
Explorer Exposed!
The Death of IE6
10 Fixes for IE6 Problems
http://pmob.co.uk/
IE6 Bug Reports
MSIE6 Bugs
Internet Explorer & CSS issues
IE CSS Bugs That'll Get You Every Time


有空在繼續讀...
謝謝保哥推薦這篇文章,很受用!!