Heim > Web-Frontend > HTML-Tutorial > CSS兼容各浏览器的hack_html/css_WEB-ITnose

CSS兼容各浏览器的hack_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:32:20
Original
1230 Leute haben es durchsucht

CSS兼容各浏览器的hack:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定版本书写CSS代码,这样就需要用到所谓的“CSS Hack”,下面以一段实例的形式介绍一下个浏览器hack。

 

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style>.test{  width: 300px;  height: 300px;  background: #fac;   /*各浏览器都认识,主要给高级浏览器用*/  background: blue\0; /*ie10、9、8*/  background: red\9; /*所有的 ie*/  +background: yellow; /*ie7、6 +号同*号 */  _background:black; /*ie6*/} :root .test{background: blue\9;} /*ie9*/.ie10 .test{background: #ffcccc;} /*ie10  (js 专属)*/</style><script type="text/javascript">  //ie 10  if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {    document.documentElement.className += "ie10";}</script></head><body>  <div class="test">蚂蚁部落</div></body></html>
Nach dem Login kopieren

 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=3370

更多内容:http://www.softwhy.com/shili/

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage