针对各种浏览器css不兼容的写法

/*针对谷歌浏览器内核支持的CSS样式*/
@media screen and (-webkit-min-device-pixel-ratio:0) {

样式

}

/*针对IE6特制识别的CSS样式*/
*HTML .SearchBox
{

样式

}

针对Firefox浏览器的内核CSS写法:
@-moz-document url-prefix() {
.font1 {color:red}
}

IE8就是自己来调试了。调试一个浏览器,有不合适的地方可以在该内核css中重写对应的方法,只需把不合适的样式重写即可实现。*HTML中则例外,需要每重写一个都要加*HTML单独处理。
针对样式名

如果只让ie6看见用*html .head{color:#000;}
如果只让ie7看见用*+html .head{color:#000;}
如果只让ff看见用:root body .head{color:#000;}
如果只让ff、IE8看见用html>/**/body .head{color:#000;}
如果只是不让ie6看见用html>body .head{color:#000;} 即对IE 6无效
如果只是不让ff、IE8看见用*body .head{color:#000;}    即对ff、IE8无效

针对具体属性

如果只让ie6看见用_     .head{_color:#000;}
如果只让ie7看见用+与_结合的方法:     .head{+color:#f00;!;_color:#000;}

IE8正式版hack

\9″ 例:”margin:0px auto\9;”.这里的”\9″可以区别所有IE8和FireFox.
“*” IE6、IE7可以识别.IE8、FireFox不能.
“_” IE6可以识别”_”,IE7、IE8、FireFox不能.
如:
.a {color:#f00;     color:#f60\9;    +color:#00FF00;    _color:#0000FF; }
从左到右分别对应 FF,IE8 IE7 IE6
=============================
P{+color:#f00;}                支持 IE7 IE6        不支持 FF  IE8b
P{_color:#f00;}                支持ie6            不支持 FF
P{color:#f00; !important;}    
P{color:#f00;}                支持 IE6 IE7 IE8b FF
P{color:#00f !important;color:#f00; }     支持IE7 IE8b FF     不支持IE6
head:first-child+body p{color:#f00;}    支持IE7 IE8b FF       不支持IE6

/*\*//*/
/**/                    支持IE8b            不支持IE6 IE7 FF
html*{color:#f00}            支持IE6 IE7          不支持 IE8b FF
body>p{color:#f00}            支持IE7 IE8b FF        不支持 IE6
html[xmlns] p {color:#f00}        支持 IE7 IE8b FF    不支持 IE6
@import "style.css"
@import "style.css" 
@import url(style.css)
@import url(‘style.css‘)
@import url("style.css")        支持 IE6 IE7 IE8b FF

P{/*/*color:#f00;/* */}            支持 IE6 IE7  FF     不支持 IE8b

时间: 2024-10-17 09:34:31

针对各种浏览器css不兼容的写法的相关文章

浏览器css的兼容问题小总结------彭记(025)

1.         cursor:hand   VS   cursor:pointer firefox不支持hand,但ie支持pointer 解决方法:   统一使用pointer 2. innerText在IE中能正常工作,但在FireFox中却不行. 需用textContent. 解决方法: if(navigator.appName.indexOf("Explorer")   >   -1){ document.getElementById('element').inne

IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

浏览器兼容问题一直是前段开发工程师比较头痛的问题,熟悉了里面的规则也就变得简单了,这里有一份资料可以分享给大家,大家平时开发过程中遵循这个规律的话,会变得轻松多了: 各浏览器CSS hack兼容表:   IE6 IE7 IE8 Firefox Chrome Safari !important   Y   Y     _ Y           * Y Y         *+   Y         \9 Y Y Y       \0     Y       nth-of-type(1)    

CSS设置DIV背景色渐变显示--针对不同浏览器,背景渐变的兼容问问题

针对不同浏览器,背景渐变的兼容问问题! background: -ms-linear-gradient(top, #fff,  #0000ff);        /* IE 10 */ background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/ background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/ background:

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网站,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS HACK 1, !important

浏览器CSS兼容

一.<important 在IE6及FF中的使用>.box1 {width:150px !important;} .box1 {width:250px;} !important是说这个设置有优先级,IE碰到!important不会出错只是忽略他的功能,假如后面又设置了width,IE会以最后设置的 width为准,假如后面再没有其它设置,则会用当前这个值,也就是前面的!important那个值.比如:#test {width: 300px !important }IE与FF都显示300PX.假

css针对各个浏览器的前缀是什么

css针对各个浏览器的前缀是什么:现在写css3代码的时候,为了实现兼容性,需要在前面加前缀以便兼容对应的浏览器.下面就列举一下前缀的写法: -webkit//Webkit内核,例如谷歌和Safari浏览器 -moz//Gecko内核,例如火狐浏览器 -o//Presto内核,例如Opera浏览器 -ms//Trident内核,例如IE浏览器 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18227 更多内容可以参阅:http

【转载】各浏览器CSS兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容

针对不同浏览器内核的写法

针对不同浏览器内核的写法:建议:尽可能的手写代码,可以有效的提高学习效率和深度.现在使用的浏览器类型多种多样,对于浏览器者来说选择性提高了,也提高了竞争性,对于提供更为优质的功能有着极大地作用,但是对于开发者来说却是一个噩梦,在CSS中,有些属性使用W3C的写法在一些浏览器中并不能生效,需要使用单独针对某种浏览器内核的写法才可以,下面罗列一下针对各种浏览器的写法: -webkit//Webkit内核,例如谷歌和Safari浏览器 -moz//Gecko内核,例如火狐浏览器 -o//Presto内

css在各浏览器中的兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容