資訊專欄INFORMATION COLUMN
摘要：篇樣式兼容性問題按模式渲染按模式渲染怪異模式怪異模式是沒有遵守規范的一種兼容模式，其中的是包括左右左右在內的全部范圍也一樣，類似于，而且的不能從父元素繼承。
HTML 篇 樣式兼容性問題
怪異模式
怪異模式是沒有遵守 W3C 規范的一種兼容模式，其中的 width 是包括 contentWidth, 左右padding, 左右border 在內的全部范圍(height 也一樣)，類似于 box-sizing: border-box;，而且 table 的 font-size 不能從父元素繼承。以下情況會觸發瀏覽器怪異模式(Quirks Mode):
沒寫 DOCTYPE 觸發怪異模式
在前加, IE6 下會觸發怪異模式
在前加入, IE7進入怪異模式
前有任何非空字符，會在IE6 下會觸發怪異模式
前有 XML ，在IE7 下不會觸發怪異模式，但不能有其他非空字符
檢查document.compatMode,可以查看瀏覽器工作在哪個模式：值BackCompat為怪異模式，值CSS1Compat為標準模式
display:inline-block 元素間有間隙
css 篇
雙倍間距問題
/*一下代碼在 IE6 中會出現雙倍間距*/
#box{
float: left;
margin: 10px;
}
//解決方法
#box{
float: left;
margin: 10px;
display: inline;
}
錯位問題
/*IE6中，這樣的多個盒子并列時會發生向下偏移，應該對偏移的盒子添加負 margin-top 進行修正*/
.box{
float: left;
}
IE6 奇數寬高問題
IE6 中盒子的寬(width) 和高(height)設置為奇數時會有 bug，盡量設置為偶數即可。
IE6 Peekaboo Bug一個 div#top 中加入一個 div#float 向左浮動，然后加入一個或多個 div, 直到清除浮動為止：
float div
inside-div text!
inside-div text!
clear div
解決方法，給 #top 一個 height 或 width ：
#top{
height: 300px;
}
盒子坍塌
這個問題比較普遍，在盒內層元素設置外邊距時會發生
/*發生盒子坍塌*/
#box{
height: 300px;
}
#box .inner-box{
margin:20px;
}
/*修正*/
#box{
height: 300px;
margin-top: -20px;
}
#box .inner-box{
margin:20px;
}
文字大小
字體大小在不同瀏覽上不一致。例如font-size:14px，在 IE 中的實際行高是16px，下面有3px留白；在 Firefox 中的實際行高是17px，下面有3px留白，上邊1px留白；在 opera 中就更不一樣了。解決方式統一指定行高 line-height
html{
font-size: 14px;
line-height: 14px;
}
另外，我們會遇到 font-size:62.5% 這樣的定義，為了把默認的 16px 映射為 10px, 這樣1em = 10px 更利于計算。
去除元素默認邊距有很多元素默認帶有邊距，對我們排版很不利。但利用通配符*去除邊距存在性能問題，所以用下面語句清除默認邊距
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
margin: 0;
padding: 0;
}
低版本 IE 高度限定失效
一般的元素指定高度屬性 height 可以固定該元素高度，但在低版本 IE 中無法固定元素高度，該元素高度依然會被內容撐開，需要注意。(寬度也一樣)
IE6 不支持 png 透明效果解決方式用濾鏡
#box{
_background: none;
filter: progid:DXImageTransForm.Microsoft.AlphaImageLoader(src="路徑");
}
Firefox 的寬度問題
Firefox瀏覽器會的 body 比其他瀏覽器的 body 寬度小1個像素，注意設置其子元素（尤其 float 元素大小，防止排版混亂。
IE6中的吞吃問題IE6 中為上下2個 div 中的上一個地址設置背景時，下一個 div 也會帶有背景。類似的還有 overflow:scroll 時，出現的滾動條不完整。應該 分別對在上方的 div 和滾動條不完整的 div 加 zoom: 1樣式。
IE6 圖片格式問題IE6 中的圖片默認存在邊框，應統一去除。同時圖片下方會有空隙，用 font-size解決
img{
border: none;
font-size: 0;
}
IE中無法定義1px高度這樣的小盒子
IE6 中的空元素高度不能低于19px，解決方式有四種：
在元素中插入空注釋
在元素中插入空格
加入 css: overflow:hidden;
加入 css: font-size: 0;
IE6 z-index 失效當父元素已設置 z-index 屬性后，子元素的 z-index 會失效。
IE6中 select 始終高于 div浮層 div 出現時隱藏 select，浮層 div 消失時再顯示 select。
讓 chrome 支持小于 12px 的字體#box{
font-size: 8px;
-webkit-text-size-adjust: none;
}
/* 但是，上面這個方法 chrome27 以后就不能用了。但我們可以用 css3 解決這個問題 */
#box{
font-size: 12px;
-webkit-transform: scale(0.75);
}
CSS Hack
兼容性屬性設置，注意書寫順序：優先寫高等級瀏覽器支持方式、優先寫支持瀏覽器多的方式
/*以 color 屬性為例，注意書寫順序*/
#box{
color: #f00; //所有瀏覽器都支持
color: #0f0 !important; //只有 IE6 無效
color: #00f9; //所有 IE 都有效
color: #ff0