1. @media \0screen,screen\9
利用 @media \0screen,screen\9{}可以實現(xiàn)只修改IE8的樣式，但是偽類選擇器中設置的樣式會失效澳叉。
2. 背景色設置半透明兼容
- 由于IE8及以下不支持rgba衣摩，因此對于IE8可使用filter定義半透明煤禽。
- IE9同時支持filter和rgba屬性胰耗，因此會導致IE9下顏色產(chǎn)生疊加殴泰，因此對于IE8需要單獨處理挚歧。
只兼容到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. 帶邊框的三角形箭頭
利用兩個偽類元素:before和:after上下疊加
//實現(xiàn)一個向下的箭頭
.arrow:before,.arrow:after{content: "";display: block;position: absolute;width: 0;height: 0;border-style: solid;border-color: transparent;}
//:before實現(xiàn)箭頭的邊框
.arrow:before{border-width: 14px 8px 0 8px;border-top-color:#e0dede;left: 0px;bottom: 0;}
//:after實現(xiàn)箭頭的主體部分
.arrow:after{border-width: 13px 7px 0 7px;border-top-color:#ffffff;left: 1px;bottom: 1px;}
4. 繼承inherit
改變父元素的屬性值扛稽，子元素中相同的屬性值如果設置為inherit，就能跟著父元素改變滑负，這樣可以提高代碼后期的可維護性在张。
5. iframe解決彈窗被flash遮擋的問題
- 在flash上面蓋一個iframe就可以解決該問題，層級關(guān)系是 彈窗>iframe>flash矮慕。
- 但是IE下iframe背景無法設置為透明帮匾，解決的辦法只能是制作非透明的規(guī)則彈窗，然后iframe的大小和該彈窗一致并至于彈窗下面痴鳄。
** 6. box-sizing:border-box兼容性**
在IE8下瘟斜，如果設置了元素的min/max-width/height，會忽略box-sizing:border-box痪寻。
7. 文字顏色漸變的幾種方法：
- 利用mask-image屬性螺句，需要給標簽的data-textVal屬性賦值，再利用:after偽類元素content:attr(data-textVal)獲取該屬性橡类。如果文字是動態(tài)變化的壹蔓，那么需要動態(tài)為data-textVal賦值。此外猫态，目前只兼容webkit內(nèi)核的瀏覽器。
- 結(jié)合background-clip和text-fill-color實現(xiàn)，也只能在webkit內(nèi)核瀏覽器中實現(xiàn)亲雪。但是在移動端勇凭，由于-webkit-gradient()和-webkit-background-clip的兼容性不一致，因此移動端還是存在兼容性問題導致部分機型只能展示漸變背景而沒有文案义辕。
- 利用mix-blend-mode css3混合模式實現(xiàn)虾标，同時結(jié)合:before和:after，兼容性相對a灌砖、b較好璧函，但是對于動態(tài)變化的文字，同樣需要動態(tài)賦值data-textVal屬性基显。
- 利用svg實現(xiàn)文字漸變蘸吓，兼容性較好，會讓html結(jié)構(gòu)中代碼增多撩幽。
- canvas技術(shù)實現(xiàn)文字漸變库继，增加了js代碼，文案變化不靈活窜醉。
8. 瀏覽器對px的小數(shù)點數(shù)值的解析
- 四舍五入：IE8宪萄、IE9、Chrome榨惰、Firefox
- 取整：IE7及以下拜英、Safari
9. 如何規(guī)劃CSS Sprites圖片可以使圖片更優(yōu)化的方法
- 將顏色相近或者相同的圖標組合在一起可以降低顏色數(shù)，從而減少文件體積琅催。
- 相同尺寸的CSS Sprites圖片居凶，垂直排列圖標會比水平排列的文件體積大。
- 在CSS Sprites圖片中恢暖，水平排列圖標會比垂直排列的文件體積大排监。
10. 首字母下沉
利用 :first-letter{float:left;} 實現(xiàn)一段文字中第一個文字下沉的效果。
