CSS的Hack大搜集 - html/css语言栏目：html.css - 自学

2023/03/07 · admin

Hack在CSS的编写中是经常被用到的一种技术。之所以出现了Hack，是因为各个浏览器的解析有专属于自己的写法的。这也是CSS的神奇之处之一。不过，Hack虽然是如此的好用，作为前端写代码的我们来说，用它绝对是快准狠的解决了问题，但是不太推荐大家用Hack。　　Hack的技术是针对不同浏览器写不同的样式，让浏览器达到不同的渲染效果。实现每个浏览器不同的渲染效果，可以用条件样式，也可以用Hack。下面就是我收集的一些Hack的各种方法。　　1、Firefox [css] @-moz-document url-prefix() { .div1 { width:30px; } } 　　支持Firefox的还有几种写法： [css] /* 支持所有firefox版本 */ #div1[id=div1] { width:30px; } 　　或 [css] @-moz-document url-prefix() { .div { width:30px; } } 　　或 [css] /* 支持所有Gecko内核的浏览器 (包括Firefox) */ *>.div1 { width:30px; } 　　2、Webkit枘核浏览器(chrome and safari) [css] @media screen and (-webkit-min-device-pixel-ratio:0) { div { width:30px; } } 　　上面写法主要是针对Webkit内核的浏览器，如Google Chrome 和 Safari浏览器： [css] @media screen and (-webkit-min-device-pixel-ratio:0) { div { width:30px; } } 　　3、Opera浏览器　　Opera浏览器没有Hack，网上的那些Opera的Hack我试过了，并不起作用。好不容易对Opera起作用了，一般浏览器都起作用了。若大家有Opera的Hack欢迎分享哟。　　4、IE9浏览器 [css] :root div {height:300px\9;} 　　5、IE9以及IE9以下版本 [css] div {height:300px\9;} 　　6、IE8浏览器 [css] div {height:300px/;} 　　或 [css @media \0screen{ div {height:300px;} } 　　7、IE8以及IE8以上的版本 [css] div {height:300px\0;} 　　8、IE7浏览器 [css] *+ html div{height:300px;background:red;} 　　或 [css] *:first-child+html div{height:300px;} 　　9、IE7及IE7以下版本浏览器 [css] div {*height:300px;} 　　10、IE6浏览器 [css] div {_height/**/:/**/300px;} 　　或 [css] div {_height: 300px;} 　　或 [css] *html div {height: 300px;} 　　上面的内容是我收集的一些各个版本浏览器下如何识别各种的Hack写法，包括了现代浏览器还有就是很奇葩的浏览器。接下来是 CSS选择器和CSS属性选择器在不同浏览器的支持情况　　1、IE6 [css] * html div {background:red;} 　　2、仅仅IE7浏览器 [css] *:first-child+html div {background:red;} 　　3、除IE6之外的所有浏览器(IE7-9, Firefox,Safari,Opera) [css] html>body div {background:red;} 　　4、IE8-9,Firefox,Safari,Opear [css] html>/**/body div {background:red;} 　　5、IE9+ [css] :root div {background:red;} 　　6、Firefox浏览器 [css] @-moz-document url-prefix() { div {background:red;} } 　　6、Webkit内核浏览器(Safari和Google Chrome) [css] @media screen and (-webkit-min-device-pixel-ratio:0) { div {background:red;} } 　　7、Opera浏览器　　Opera浏览器没有Hack，网上的那些Opera的Hack我试过了，并不起作用。好不容易对Opera起作用了，一般浏览器都起作用了。若大家有Opera的Hack欢迎分享哟。　　8、iPhone / mobile webkit [css] @media screen and (max-device-width: 480px) { div {background:red;} } 　　上面为大家介绍的是有关各个浏览器关于CSS的Hack的写法，基中有针对于现代浏览器Safari,Google Chrome和Firefox的写法还有前端们最讨厌的IE家族的Hack写法。下面是一些综合小技巧：　　一、方法一： [css] div { height:300px; background: red;/*所有现代浏览器*/ background: green\9;/*所有IE浏览器*/ background: lime\0;/*IE8-9浏览器 Opera*/ *background: red;/*IE6-7浏览器*/ +background: blue;/*IE7浏览器*/ _background: orange;/*IE6浏览器*/ } @media all and (min-width:0px){ background: #000;/*Webkit和Opera浏览器*/ } @media screen and (-webkit-min-device-pixel-ratio:0) { background: #f36;/*Webkit内核浏览器*/ } @-moz-document url-prefix(){ div{background:#ccc;}/* all firefox */ } 　　二、方法二：　　1、创建条件样式表，并在HTML中body里添加相应的class类名 HTML代码： [html]      CSS代码： [css] div {height:30px;background: blue;}/*现代浏览器*/ .non-ie div {background: red;}/*除IE外浏览器*/ .ie9 div {background: yellow;}/*IE9浏览器*/ .ie8 div{background: green;}/*IE8浏览器*/ .ie7 div {background: orange;}/*IE7浏览器*/ .ie6 div {background: lime;}/*IE6浏览器*/ @media all and (min-width: 0px){ div {background:black;} /* webkit and opera */ } @media screen and (-webkit-min-device-pixel-ratio:0){ div{background:#369;}/* webkit */ } @-moz-document url-prefix(){ div{background:#963;}/* firefox * / } 　　以上就是我所收集并整理的有关CSS的Hack的一些小技巧，希望能对大家有所帮助，能为大家解燃眉之急。不在万不得已的时候，大家还是不要用Hack哟。

CSS的Hack大搜集 - html/css语言栏目：html.css - 自学

相关文章

最新评论

最近发表

网站分类

文章归档