Skip to content

Instantly share code, notes, and snippets.

@q946401639
Last active August 29, 2015 14:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save q946401639/4e8a0e969430ca387c55 to your computer and use it in GitHub Desktop.
Save q946401639/4e8a0e969430ca387c55 to your computer and use it in GitHub Desktop.
主流浏览器---专属CSS hack

主流浏览器---专属CSS hack

-----欢迎大家指正错误,深表感谢

CSS hack:由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。简而言之,浏览器不同于W3C关于CSS标准的解析就是CSS hack。

一般谈到CSS hack,最先想到的就是ie6。ie6很头疼,曾经是辉煌,如今是夕阳西下了,被进步理论和思想淘汰是早晚的事情,目前想做的就是尽最大的可能去向下兼容它。这篇博文需要说的是:主流浏览器之专属CSS hack。

下面从ie开始说吧:

###ie6(_):

/*ie 6*/
_width:100px;
/*
给单独ie 6的解析值,在属性前加下划线“_”
*/

==== ###ie6 & ie7(*):

/*ie 6 和ie 7*/
*width:100px;
/*
给单独ie6 和 ie 7的解析值,在属性前加星号“*”
*/

==== ###ie7(*+):

/*ie 7*/
*+width:100px;
/*
给单独ie 7的解析值,在属性前加星号和加号“*+”
*/

==== ###ie8(\0):

/*ie 8*/
width:100px\0;
/*
给单独ie 8的解析值,在属性值后加“\0”
*/

==== ###ie9(\9\0):

/*ie 9*/
width:100px\9\0;
/*
给单独ie 9的解析值,在属性值后加“\9\0”
*/

==== ###所有ie(\9):

/*ie*/
width:100px\9;
/*
给所有ie的解析值,在属性值后加“\9”
*/

==== ###firefox:

/* 低版本火狐1,2 */
body:empty #firefox12/*选择器前加 body:empty*/
{width: 100px;}
 
/* 高版本火狐*/
@-moz-document url-prefix()/* 选择器前加 @-moz-document url-prefix() */
{
 #firefox
 {
  width:100px;
 }
}

==== ###safari:

/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
/* 选择器前加 @media screen and (-webkit-min-device-pixel-ratio:0) */
{#safari { display: block; }}

==== ###opera:

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
/*选择器前加 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)*/
{head~body #opera { display: block; }}

==== CSS Hack 虽好且方便兼容各浏览器,但是通不过 W3C 验证,所以还得自己权衡是否有必要去使用。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment