search

Home  >  Article  >  Web Front-end  >  Solutions to browser compatibility issues

Solutions to browser compatibility issues

巴扎黑
巴扎黑Original
2017-07-22 17:53:061782browse

一、需要兼容那些浏览器

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

（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>

 

The above is the detailed content of Solutions to browser compatibility issues. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Image viewer viewjs used in web pagesNext article：Image viewer viewjs used in web pages

Related articles

See more