【重构笔记-2】工作中遇到的问题总结

1. @media \0screen,screen\9
利用 @media \0screen,screen\9{}可以实现只修改IE8的样式，但是伪类选择器中设置的样式会失效。

2. 背景色设置半透明兼容

由于IE8及以下不支持rgba，因此对于IE8可使用filter定义半透明。
IE9同时支持filter和rgba属性，因此会导致IE9下颜色产生叠加，因此对于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上下叠加

//实现一个向下的箭头
.arrow:before,.arrow:after{content: "";display: block;position: absolute;width: 0;height: 0;border-style: solid;border-color: transparent;}
//:before实现箭头的边框
.arrow:before{border-width: 14px 8px 0 8px;border-top-color:#e0dede;left: 0px;bottom: 0;}
//:after实现箭头的主体部分
.arrow:after{border-width: 13px 7px 0 7px;border-top-color:#ffffff;left: 1px;bottom: 1px;}

4. 继承inherit
改变父元素的属性值，子元素中相同的属性值如果设置为inherit，就能跟着父元素改变，这样可以提高代码后期的可维护性。

5. iframe解决弹窗被flash遮挡的问题

在flash上面盖一个iframe就可以解决该问题，层级关系是弹窗>iframe>flash。
但是IE下iframe背景无法设置为透明，解决的办法只能是制作非透明的规则弹窗，然后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)获取该属性。如果文字是动态变化的，那么需要动态为data-textVal赋值。此外，目前只兼容webkit内核的浏览器。
结合background-clip和text-fill-color实现，也只能在webkit内核浏览器中实现。但是在移动端，由于-webkit-gradient()和-webkit-background-clip的兼容性不一致，因此移动端还是存在兼容性问题导致部分机型只能展示渐变背景而没有文案。
利用mix-blend-mode css3混合模式实现，同时结合:before和:after，兼容性相对a、b较好，但是对于动态变化的文字，同样需要动态赋值data-textVal属性。
利用svg实现文字渐变，兼容性较好，会让html结构中代码增多。
canvas技术实现文字渐变，增加了js代码，文案变化不灵活。

8. 浏览器对px的小数点数值的解析

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

9. 如何规划CSS Sprites图片可以使图片更优化的方法

将颜色相近或者相同的图标组合在一起可以降低颜色数，从而减少文件体积。
相同尺寸的CSS Sprites图片，垂直排列图标会比水平排列的文件体积大。
在CSS Sprites图片中，水平排列图标会比垂直排列的文件体积大。

10. 首字母下沉
利用 :first-letter{float:left;} 实现一段文字中第一个文字下沉的效果。

【重构笔记-2】工作中遇到的问题总结

推荐阅读更多精彩内容