1. @media \0screen,screen\9
利用 @media \0screen,screen\9{}可以實(shí)現(xiàn)只修改IE8的樣式，但是偽類選擇器中設(shè)置的樣式會(huì)失效。

2. 背景色設(shè)置半透明兼容

• 由于IE8及以下不支持rgba，因此對(duì)于IE8可使用filter定義半透明。
• IE9同時(shí)支持filter和rgba屬性，因此會(huì)導(dǎo)致IE9下顏色產(chǎn)生疊加，因此對(duì)于IE8需要單獨(dú)處理。

  只兼容到IE8
  
  .style{background:rgba(0,0,0,.5);}
  @media \0screen\,screen\9{         
  

.style{filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7F000000',endColorstr='#7F000000');}
}
```

3. 帶邊框的三角形箭頭
利用兩個(gè)偽類元素:before和:after上下疊加

//實(shí)現(xiàn)一個(gè)向下的箭頭
.arrow:before,.arrow:after{content: "";display: block;position: absolute;width: 0;height: 0;border-style: solid;border-color: transparent;}
//:before實(shí)現(xiàn)箭頭的邊框
.arrow:before{border-width: 14px 8px 0 8px;border-top-color:#e0dede;left: 0px;bottom: 0;}
//:after實(shí)現(xiàn)箭頭的主體部分
.arrow:after{border-width: 13px 7px 0 7px;border-top-color:#ffffff;left: 1px;bottom: 1px;}

4. 繼承inherit
改變父元素的屬性值，子元素中相同的屬性值如果設(shè)置為inherit，就能跟著父元素改變，這樣可以提高代碼后期的可維護(hù)性。

5. iframe解決彈窗被flash遮擋的問題

• 在flash上面蓋一個(gè)iframe就可以解決該問題，層級(jí)關(guān)系是 彈窗>iframe>flash。
• 但是IE下iframe背景無法設(shè)置為透明，解決的辦法只能是制作非透明的規(guī)則彈窗，然后iframe的大小和該彈窗一致并至于彈窗下面。

** 6. box-sizing:border-box兼容性**
在IE8下，如果設(shè)置了元素的min/max-width/height，會(huì)忽略box-sizing:border-box。

7. 文字顏色漸變的幾種方法：

• 利用mask-image屬性，需要給標(biāo)簽的data-textVal屬性賦值，再利用:after偽類元素content:attr(data-textVal)獲取該屬性。如果文字是動(dòng)態(tài)變化的，那么需要?jiǎng)討B(tài)為data-textVal賦值。此外，目前只兼容webkit內(nèi)核的瀏覽器。
• 結(jié)合background-clip和text-fill-color實(shí)現(xiàn)，也只能在webkit內(nèi)核瀏覽器中實(shí)現(xiàn)。但是在移動(dòng)端，由于-webkit-gradient()和-webkit-background-clip的兼容性不一致，因此移動(dòng)端還是存在兼容性問題導(dǎo)致部分機(jī)型只能展示漸變背景而沒有文案。
• 利用mix-blend-mode css3混合模式實(shí)現(xiàn)，同時(shí)結(jié)合:before和:after，兼容性相對(duì)a、b較好，但是對(duì)于動(dòng)態(tài)變化的文字，同樣需要?jiǎng)討B(tài)賦值data-textVal屬性。
• 利用svg實(shí)現(xiàn)文字漸變，兼容性較好，會(huì)讓html結(jié)構(gòu)中代碼增多。
• canvas技術(shù)實(shí)現(xiàn)文字漸變，增加了js代碼，文案變化不靈活。

8. 瀏覽器對(duì)px的小數(shù)點(diǎn)數(shù)值的解析

• 四舍五入：IE8、IE9、Chrome、Firefox
• 取整：IE7及以下、Safari

9. 如何規(guī)劃CSS Sprites圖片可以使圖片更優(yōu)化的方法

• 將顏色相近或者相同的圖標(biāo)組合在一起可以降低顏色數(shù)，從而減少文件體積。
• 相同尺寸的CSS Sprites圖片，垂直排列圖標(biāo)會(huì)比水平排列的文件體積大。
• 在CSS Sprites圖片中，水平排列圖標(biāo)會(huì)比垂直排列的文件體積大。

10. 首字母下沉
利用 :first-letter{float:left;} 實(shí)現(xiàn)一段文字中第一個(gè)文字下沉的效果。