css hack 浏览器携带自身特有的属性 （二）

css hack 浏览器携带自身特有的属性，才是我们真正要解决的css 兼容问题。 这里只是分享思路。

举例子：

　　1 outline，尤其是一些 自带继承特性的属性。这里指的是 隐性的inherited。input获取焦点的背景色，外边框，等等。

　　2 当图片加载失败的时候，Chrome没有多余的样式，火狐浏览器会 出现  图片加载失败的样式（出现一个 小x ）这里就不加载图片了，可以自己试一下。严格来说：这里应该是img 加载问题，不是css可以解决的，但是不同的浏览器出现不同的样式。

具体分析一下情况：

　　1：前缀的   (这里也是  css3 属性  需要特别注意的地方 )

　　　　-moz-对应 Firefox,
　　　　-webkit-对应 Safari and Chrome
　　　　-o- for Opera
　　　　-ms- for Internet Explorer

　　　　

　　　　　　

FireFox支持嵌套其专用的css语句： @-moz-document url-prefix()。

 

@-moz-document url-prefix() {
    img{ //随便写的，别当真
　　　　border:none;
　　　　backgrond-color:grba(0,0,0,.2)
　　}
}

 

 

　　2 ： Chrome、Safari等Webkit内核的浏览器的CSS Hack

　　　　Chrome、Safari等采用webkit内核的浏览器支持媒体类型查询语句：@media screen and (-webkit-min-device-pixel-ratio:0)。

@media screen and (-webkit-min-device-pixel-ratio:0) { 

  img{  //随便写的，别当真
　　　　border:none;
　　　　backgrond-color:grba(0,0,0,.2)
　　}

}

 

　　解决方法：

　　　　说出来有点娇羞：一个reset.css可以解决大部分 我们需要的兼容问题。当然需要自己书写一部分本身自己项目需要的兼容。可以百度搜索reset.css。

　　　　但是像我刚才说出的img onerror 这样的问题导致的样式，需要我们特别的注意。

　　　　思路：加载404图片，加载error图片。一般我们会默认给出一个加载失败的备用图片。考虑容错，还有许多路要走。

 

转载于:https://www.cnblogs.com/TBV7/p/7631386.html