区分各浏览器的CSS hack(包括360、搜狗、opera)

简介:

虽然说使用css hack来解决页面兼容性bug并不是个好办法,但是有时候这些hack还是用的着的,比如你接受了一个二手或是三手的遗留界面,杂乱无章的css代码,只在某个浏览器下有兼容bug,而且需要短时间内处理。

    下面一段代码可以让你很快利用css来为特定的浏览器指定样式。不多赘述,看码即懂:

复制代码
属性过滤:
_height:10px; /* IE6支持 */
*height:10px; /* IE6、IE7支持 */
height:10px\0/; /* IE8支持 */


选择器过滤:

/*针对IE6*/
* html #nav{  margin:12px;  }


/*针对IE7*/
*+html #nav{  margin:11px; }



/*针对Firefox*/
@-moz-document url-prefix() {
    #nav{ width:200px; }
}
IE7、Firefox共用
height: 100px !important(优先级)


/*针对Safari & Chrome* 360 搜狗/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #nav{ width:300px; }
}


/*针对Opera*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    #nav{ width:400px; }
}
复制代码

相关文章
|
8月前
|
存储 缓存 网络协议
html&css&浏览器相关面试题大全(二)
html&css&浏览器相关面试题大全
|
8月前
|
Web App开发 编解码 前端开发
html&css&浏览器相关面试题大全(四)
html&css&浏览器相关面试题大全
|
2月前
|
Web App开发 前端开发
CSS Hack是什么?ie6,7,8的hack分别是什么
CSS Hack是什么?ie6,7,8的hack分别是什么
57 0
|
8月前
|
存储 缓存 JavaScript
html&css&浏览器相关面试题大全(三)
html&css&浏览器相关面试题大全
|
3月前
|
Web App开发 前端开发 JavaScript
CSS容器查询获得主流浏览器支持,是什么?怎么用?
CSS容器查询获得主流浏览器支持,是什么?怎么用?
|
4月前
|
前端开发
(最简单)使用 reset-css 初始化浏览器css样式
(最简单)使用 reset-css 初始化浏览器css样式
56 1
|
7月前
|
Web App开发 前端开发
CSS @media 判断不同浏览器使用不同CSS
CSS @media 判断不同浏览器使用不同CSS
41 0
|
8月前
|
Web App开发 前端开发 JavaScript
html&css&浏览器相关面试题大全(一)
html&css&浏览器相关面试题大全
|
10月前
|
Web App开发 前端开发
区分IE6,IE7,IE8,IE9,FireFox,Chrome浏览器的CSS hack
区分IE6,IE7,IE8,IE9,FireFox,Chrome浏览器的CSS hack
|
Web App开发 前端开发 iOS开发