一、CSS常見問題
1、H5標簽兼容性
解決方案：<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
2、元素浮動之后，能設置寬度的話就給元素加寬度，如果需要寬度是內容撐開的，就給它里邊的塊元素加上浮動float:left;
3、第一塊元素浮動，第二塊元素加margin-left值等于第一塊元素寬度，在IE6下會有間隙問題
解決方案：不要用margin-left，給兩個元素都加上浮動float:left;
4、IE6下子元素超出父級寬高，會把父級寬高撐開，比如用于放置輪播的ul寬度會超出父元素
解決方案：不要讓子元素的寬高超過父級
5、P包含塊元素嵌套規則
牢記規則：p、h標簽不能嵌套塊元素
二、CSS兼容性問題
1、margin兼容性問題
1）margin-top傳遞，子元素上下margin會傳遞給父級
阻止：觸發BFC（如overflow:hidden;拯救標準瀏覽器及IE78）、觸發IE的haslayout zoom:1（拯救IE67）;
2）上下margin疊壓（觸發條件：同級元素，第一個元素的下與第二個元素的上會疊壓在一起）
解決方案：兩個元素分開設置margin，然后盡量使用同一方向的margin，比如margin-top
2、display:inline-block; 塊元素變為內聯塊， IE67不兼容；內聯元素變為內聯塊，所有瀏覽器都支持
解決方案：{display:inline-block; *display:inline; *zoom:1;}
發現問題：當然，變為內聯塊后，有一個特性就是如果元素換行，在頁面上元素之間就會有空隙的，空隙大小為一個空格的像素大小。
3、IE6元素最小高度為19px
解決方案：overflow:hidden;
4、IE67雙邊距，當元素浮動后，再設置margin，那么就會產生雙倍邊距
解決方案：針對IE67，添加*display:inline;樣式，比如頁面上橫向排列的幾組塊，會經常遇到
5、li里元素都浮動，在IE67下方會產生4px間隙問題
解決方案：針對IE67，添加*vertical-align:top;樣式
6、IE6下，兩個浮動元素之間有注釋或者內聯元素并且和父級寬度相差不超過3px，會導致多復制一些文字問題
解決方案：1）兩個浮動元素之間避免出現內聯元素或者注釋
2）與父級寬度相差3px或以上
7、IE67父級元素的overflow:hidden;子元素設置position:relative后，就包不住子元素了
解決方案：針對IE67，給父級元素添加position:relative;
8、IE6下絕對定位元素父級寬高是奇數，絕對定位元素的right和bottom值會有1px的偏差
解決方案：避免父級寬度出現奇數
9、IE6下絕對定位元素和浮動元素并列絕對定位元素消失
解決方案：浮動元素和絕對定位元素時同級的話，定位元素就會消失，只要讓它們兩個不處于同級就可以避免這個bug了
10、IE6下input的空隙
解決方案：針對IE67，給input元素添加*float:left;
11、IE6下輸入類型表單控件背景問題，背景不固定，滾動了
解決方案：設置background-attachment:fixed;
12、line-height 在IE67、FF下不兼容，會有幾個像素的偏差，目測只有IE8和其他標準瀏覽器正常
IE6下，想給給圖片設置line-height來達到垂直居中效果是實現不了的，就給img標簽單獨設置{float:left;postion:relative;top:...}
當然，文本的line-height還是識別的
13、常見文章列表布局：標題+發布日期
<ul>
<li>這里是文章列表標題，我是奇葩的IE瀏覽器<span style="float:right">2015-07-17</span></li>
<li>這里是文章列表標題2，我是奇葩的IE瀏覽器<span style="float:right">2015-07-17</span></li>
</ul>
假設你按照以上布局，那么恭喜你，在IE67下發布日期會掉到下一行去
解決方案，按如下布局：
<ul>
<li><span style="float:right">2015-07-17</span>這里是文章列表標題，我是奇葩的IE瀏覽器</li>
<li><span style="float:right">2015-07-17</span>這里是文章列表標題2，我是奇葩的IE瀏覽器</li>
</ul>
或
<ul>
<li><span style="float:left">這里是文章列表標題，我是奇葩的IE瀏覽器</span><span style="float:right">2015-07-17</span></li>
<li><span style="float:left">這里是文章列表標題2，我是奇葩的IE瀏覽器</span><span style="float:right">2015-07-17</span></li>
</ul>
14、遮罩彈窗
標準 不透明度：opacity:0~1
IE678濾鏡：filter:alpha(opacity=0~100);
15、< a >的手形光標
標準瀏覽器下，不需要設置也有
IE6下沒有，就給a{cursor:pointer;}
16、< a >的 text-decoration:none;
標準下，只需 a {text-decoration:none;}
IE6下，a {text-decoration:none;} 并且 a:hover {text-decoration:none;}
三、CSS hack
9 IE6,7 8-10 例如：background:blue\9;
+ IE67 例如：background:yellow; +background:yellow;
_ IE6 例如：_background:green;
四、png-24兼容性問題，IE6不支持
解決方案：
1）引用Js插件，不能處理body以上的，最好放在頁面底部，這樣不影響頁面加載，也就是放在</body>標簽上面
<!--[if IE 6]>
<script src="DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
<script>
DD_belatedPNG.fix("*");
</script>
<![endif]-->
2）原生濾鏡，給背景圖所在的標簽加上如下樣式，比如body
body {
_background-image:none;
_filter:progid:DXImage Transform.Microsoft.AlphaImageLoader(src="XX.png",sizingMethod="crop");
}
