Heim  >  Artikel  >  Web-Frontend  >  CSS-Hack-Zusammenfassung, Kurzanleitung, Browser-Kompatibilität, die Sie kennen müssen

CSS-Hack-Zusammenfassung, Kurzanleitung, Browser-Kompatibilität, die Sie kennen müssen

高洛峰
高洛峰Original
2016-12-24 15:27:451260Durchsuche

IE-Browser blockieren (d. h. nicht im IE angezeigt)

*:lang(zh) select {font:12px !important;} /*FF 可见,特别声明:由于Opera最新的更新,此句目前已经成为FF的专用HACK*/ 
select:empty {font:12px !important;} /*safari可见*/ 
这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。

Nur ​​von IE7 erkannt

*+html {…} 
当面临需要只针对IE7做样式的时候就可以采用这个HACK。

Wird von IE6 und niedriger erkannt

* html {…} 
这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。 
html/**/ >body select {……} 
这句与上一句的作用相同。

Nur IE6 erkennt nicht

select { display /*IE6不识别*/:none;} 
这里主要是通过CSS注释分开一个属性与值,流释在冒号前。

Nur ​​IE6 und IE5 erkennen nicht

select/**/ { display /*IE6,IE5不识别*/:none;} 
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。

Nur ​​IE5 erkennt nicht

select/*IE5不识别*/ { display:none;} 
这一句是在上一句中去掉了属性区的注释。只有IE5不识别

Box-Modelllösung

selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;} 
盒模型的清除方法不是通过!important来处理的。这点要明确。

Floats löschen

select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} 
在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题 。

Trunkierungsauslassungspunkte

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } 
这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。

Nur ​​Opera erkennt

@media all and (min-width: 0px){ select {……} } 
针对Opera浏览器做单独的设定。以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

Filter für IE5.x, nur IE5. x Es ist ersichtlich, dass

@media tty { 
i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";} 
}/* */

IE5/MAC-Filter im Allgemeinen nicht benötigt werden

/*\*//*/ 
@import "ie5mac.css"; 
/**/

IE's if Condition Hack

<!--[if IE]> Only IE <![endif]--> 
所有的IE可识别 
<!--[if IE 5.0]> Only IE 5.0 <![endif]--> 
只有IE5.0可以识别 
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]--> 
IE5.0包换IE5.5都可以识别 
<!--[if lt IE 6]> Only IE 6- <![endif]--> 
仅IE6可识别 
<!--[if gte IE 6]> Only IE 6/+ <![endif]--> 
IE6以及IE6以下的IE5.x都可识别 
<!--[if lte IE 7]> Only IE 7/- <![endif]-->

Nur ​​IE7 kann das erkennen Der obige Inhalt ist nicht vollständig. Ich möchte alle mit mir zusammenarbeiten, um diese Techniken für zukünftige Arbeitsanfragen zusammenzufassen. Gleichzeitig möchte ich den Autoren danken, die diese HACKs recherchiert haben.


Weitere Kurzanleitungen zur CSS-Hack-Zusammenfassung, Browserkompatibilität und verwandte Artikel finden Sie auf der chinesischen PHP-Website!


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn