집 >웹 프론트엔드 >HTML 튜토리얼 >브라우저 호환성 문제에 대한 솔루션

브라우저 호환성 문제에 대한 솔루션

巴扎黑원래의: 2017-07-22 17:53:061798검색

一、需要兼容那些浏览器

根据用户群体决定兼容哪些浏览器：

（1）面向普通用户

IE8+，Chrome,Firefox

(2)企业级产品

IE9+，Chrome,Firefox

如何了解浏览器市场份额：

百度统计：

二、浏览器兼容方案

1、css层叠原理

1 div {2                 display: -webkit-box;3                 display: -webkit-flex;4                 display: -moz-box;5                 display: -ms-flexbox;6                 display: flex7             }

如上面代码所示，同一个属性，后面书写的值会覆盖前面书写的值，并且对于浏览器无效的属性值会被忽略。

2、条件注释

针对IE6，IE7，IE8，IE9的条件注释，见如下代码：

<!--[if lt IE 7]><html class=&#39;ie6&#39;><![endif]--><!--[if IE 7]><html class=&#39;ie7&#39;><![endif]--><!--[if IE 8]><html class=&#39;ie8&#39;><![endif]--><!--[if IE 9]><html class=&#39;ie9&#39;><![endif]--><!--[if (gt IE 9) | !(IE)]><!-->    <html class=&#39;W3C&#39;><!--<![endif]-->

效果：

（1）chrome下：

（2）IE下（如IE8）：

这样就可以针对不同的浏览器做兼容性处理了，如：

1 .ie8 .selector{2                 /*样式*/3             }

3、CSS hack

具体示例见如下代码：

 1 <!DOCTYPE html> 2 <html lang="zh"> 3  4     <head> 5         <meta charset="UTF-8" /> 6         <title>CSS Hack</title> 7         <style type="text/css"> 8             * { 9                 margin: 0;10                 padding: 0;11             }12             13             .tip {14                 /*chrome显示blue*/15                 background: blue;16                 /*IE8 显示red \9对IE8-6有效*/17                 background: red\9;18                 /*IE7 显示black *前缀对IE7、IE6有效*/19                 *background: black;20                 /*IE6 显示orange _前缀对IE6有效*/21                 _background: orange;22             }23         </style>24     </head>25 26     <body>27         <div class="tip">28             12329         </div>30     </body>31 32 </html>

위 내용은 브라우저 호환성 문제에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：웹 페이지에 사용되는 이미지 뷰어 viewjs다음 기사：웹 페이지에 사용되는 이미지 뷰어 viewjs