前言
这些天，我一直在看我刚进入Pelican平台时写的一些文章。 浏览量和浏览量都不是很高，所以我决定在接下来的一段时间内重新绘制个别文章，以确保制作出来的文章不水文。 ，拒绝水文从我做起。
今天我们就来说说如何只支持Google Chrome访问查看页面，为您带来更好的体验。 本文提到的浏览器兼容性问题，我用这篇文章来证明，并不是我不了解浏览器兼容性问题，而是当时的其他诱因导致我选择了一刀切的做法应付需求（我是不粘锅）。
嘿嘿，各位挖坑的小伙伴们~既然点进去了，不妨继续往下看吧^_^
思维观念
所谓浏览器兼容性问题，是指不同的浏览器对同一段代码有不同的解释html5兼容性问题，导致页面显示效果不一致的情况。
上面的定义只是简单的语言。 我们来看看百度百科的权威解释：浏览器兼容性问题也称为网页兼容性或网站兼容性问题，是指网页在各种浏览器上的显示效果可能不一致。 导致浏览器和网页之间的兼容性问题。 在网站的设计和制作中，保证浏览器的兼容性，使网站能够在不同的浏览器中正常显示。 对于浏览器软件的开发和设计来说，浏览器与标准的兼容性更好才能给用户带来更好的体验。
原因
浏览器兼容性问题的根本原因是每个浏览器使用不同的内核，在处理同一件事时有不同的想法。
如何理解上面的文字呢？ 即：不同的浏览器使用不同的内核，支持HTML等网页语言标准，以及不同的用户客户端环境（如不同的帧率），导致显示效果无法达到理想的效果。
解决方案
前端开发经常需要检查浏览器兼容性。 这里推荐这个查询网站（Can I Use）。 是为后端开发者定制的一个查询CSS、JS、HTML5、SVG在主流浏览器中的特性和兼容性的网站。 可以保证网页在浏览器中的兼容性。 通过这个工具，我们可以快速了解代码在各种浏览器中的兼容性。 我强烈推荐它。 大家赶紧来体验吧！ 界面效果如下图所示：
该工具只能向我们展示查询功能在不同浏览器上的兼容性。 至于如何解决兼容性问题，就得看下面的解决方案了→
CSS 兼容性问题
1、不同的浏览器默认的标签内外行间距不同。
解决方案：*{保证金：0; 填充：0；}
事实上，每个后端开发人员消除浏览器自带默认样式的方法都是相似的。 这是我选择清除默认样式的重置样式代码：
/** * 该文件用于去除浏览器样式*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,首字母缩略词、地址、大、引用、代码、del、dfn、em、img、ins、kbd、q、s、samp、小、罢工、强、sub、sup、tt、var、b、u、i、中心、 dl、dt、dd、ol、ul、li、fieldset、form、label、legend、table、caption、tbody、tfoot、thead、tr、th、td、article、aside、canvas、details、embed、figure、figcaption、页脚、页眉、hgroup、菜单、导航、输出、ruby、部分、摘要、时间、标记、音频、视频 { 填充：0; 保证金：0； 边框：0； 轮廓：0； 字体系列：“Helvetica Neue For Number”、-apple-system、BlinkMacSystemFont、“Segoe UI”、Roboto、“PingFang SC”、“Hiragino Sans GB”、“Microsoft YaHei”、“Helvetica Neue”、Helvetica、Arial、无衬线字体; 自动换行：断词； } html, 正文 { 宽度: 100%; 高度：100%； } a{ 文本装饰：无； -webkit-tap-highlight-color:rgba(255,255,255,0); } ul,ol{ 列表样式类型：无； } 文本区域 { 调整大小：无； } /*去掉输入按钮的默认样式*/ input,button,textarea { -webkit-appearance: none; -webkit-tap-highlight-color: rgba(255, 225, 225, 0); 填充：0； 边框：0； 轮廓：0； } // 修改placeholder属性的默认文本颜色 input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit 浏览器 */ color: #999; } input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 到 18 */ color: #999; } input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; }
除了自己定义消除默认样式的代码外，还可以选择使用别人写的成熟插件Normalize.css来消除默认样式；
2. 带有标签的图片在IE9中会有边框
解决方案：img{border:none;}
3. IE6及以下版本中的浮动元素，浮动边缘双倍间距
解决方案：不要使用margin，使用padding
4.在IE6及以下版本中，部分块元素具有默认高度。
解决办法：设置font-size：0； 对于元素
5.标签的红色边框
解决方案：a{outline: none;}
6. IE6不支持min-height属性
解决方案：{最小高度：200px; _高度：350px；}
7. IE9以下浏览器无法使用opacity
解决方案：Firefox/Chrome/Safari/Opera浏览器使用不透明度； IE浏览器使用过滤器
不透明度：0.7； /*FF chrome safari opera*/ 滤镜: alpha(不透明度:70); /*使用了ie过滤器，兼容ie*/
8. IE6/7不支持display:inline-block
解决方案：{display: inline-block; *显示：内联；}
9. 光标兼容性问题
解决方案：统一使用{cursor:pointer;}
10、IE6/7中，img标签和text放在一起时html5兼容性问题，line-height失效。
解：字面意义和
两者都设置为浮动
11、表格长度固定，td手动换行。
解决方案：table设置{table-layout:fixed}，td设置{word-wrap:break-word}
12、为相邻元素设置边距线间距时，边距将取最大值，舍弃较小的值。
解决方案：为了防止行距重叠，可以给子元素添加一个父元素，并设置父元素设置：{overflow:hidden}
13.标签css状态的顺序
解决办法：按照link--visited--hover--active的顺序编译
14、IE6/7下图片下方有间隙
解决方案：img{显示：块;}
15. ul 标签在 Firefox 中默认有一个 padding 值，但在 IE 中只有 margin 有值。
解决方案：ul{margin: 0;padding: 0;}
16.在IE中指定li的高度后，出现排版错误。
解决办法：设置行高
17、ul或li浮动后，显示在div之外。
解决方法：清除浮子； 必须添加在 ul 标签之后以关闭内部 div
18、ul设置为float后，在IE中margin会变大。
解决方案： ul{display: inline;} 、 li{list-style-position: Outside;}
19.当li中的内容超过宽度时，显示为省略号。
li{ 宽度：200px; 空白：nowrap； 文本溢出：省略号； -o-text-overflow：省略号； 溢出：隐藏； }
20、p嵌套div时出现空行
解决办法：li{display: inline;}
21、IE6默认的div高度是字体显示的高度。
解决方案：{line-height: 1px;}或{overflow:hidden;}
22. Chrome 中字体大小不能大于 10px
解决方案：p{font-size: 12px; 变换：缩放（0.8）；}
23、谷歌浏览器记住密码后输入框背景颜色为红色。
输入{背景颜色：透明！重要; 输入：-webkit-autofill，文本区域：-webkit-autofill，选择：-webkit-autofill{ -webkit-text-fill-color：#333！重要; -webkit-box -shadow: 0 0 0 1000px 透明插图！重要； 背景颜色：透明！重要； 背景图像：无！重要； 过渡：背景颜色 5000s 缓入缓出 0s； }
24. CSS3兼容的前缀表示
内核浏览器的编写方法
-webkit-
webkit渲染引擎
铬/野生动物园
-莫兹-
壁虎渲染引擎
火狐浏览器
-多发性硬化症-
三叉戟渲染引擎
IE
-o-
欧佩克渲染引擎
歌剧
喜欢：
.box{ 高度：40px; 背景颜色：红色； 颜色：#fff； -webkit边框半径：5px； // chrome/safari -moz-border-radius: 5px; // Firefox -ms-border-radius : 5px; // IE -o-border-radius: 5px; // Opera 边框半径: 5px; }
JS兼容性问题
1. 事件对象的兼容性
e = ev || 窗口事件
2. 兼容滚滚风暴
滚动顶部 = document.documentElement.scrollTop || 文档.body.scrollTop;
3.防止冒泡相容
如果（e.stopPropagation）{ e.stopPropagation; } else { e.cancelBubble=true; }
4. 防止默认行为的兼容性
如果（e.preventDefault）{ e.preventDefault; } else { e.returnValue = false; }
5.增加风暴监视器兼容性
if (target.addEventListener) { target.addEventListener("click", fun, false); } } else { target.attachEvent("onclick", fun); }
6.ajax创建对象的兼容性
var xhr = null; if (窗口。) { xhr = new; } else { xhr = new ActiveXObject("Microsoft XMLHTTP"); }
7. 鼠标键盘编码兼容性
函数鼠标 (ev) { var e = ev || 窗口.事件; if (evt) { 返回 e.button; } else if (window.event) { switch (e.button) { case 1: return 0; 情况4：返回1； 情况2：返回2； } } }
8. 在IE中，事件对象有x和y属性。 event.x在Firefox中的等价物是event.pageX，但event.pageX在IE中不存在。
x = 事件.x ? 事件.x : 事件.pageX;
9、IE下，事件对象有srcElement属性，但没有target属性； 在Firefox下，事件对象具有target属性，但没有srcElement属性。
var 源 = ev.target || ev.srcElement; var target = ev.relatedTarget || ev.toElement;
10、火狐中严禁使用CSS选择网页内容，IE中严禁使用JS。
-moz-用户选择：无； // Firefox obj.onselectstart = function {return false;} // IE
11.innerText在IE中正常工作，但在FireFox中不行
if (navigator.appName.indexOf("Explorer") > -1) { document.getElementById('element').innerText = "IE"; } } else { document.getElementById('element').textContent = "Firefox"; }
12.在Firefox下，可以使用const关键字或var关键字来定义常量； 在IE下，只能使用var关键字来定义常量。
解决方案：统一使用var关键字定义常量
移动兼容性问题
解决方案：
2.禁止iOS弹出各种操作窗口
解决方案：-webkit-touch-callout:none
解决方案：
4.禁止iOS和Android用户选择文本
解决方案：-webkit-user-select:none
5、iOS下，取消打字时默认英文首字母小写。
解决方案：
6.取消Android上的语音输入按钮
解决方案：input::-webkit-input-speech-button {display: none}
7、更改移动端丑陋点击的高亮效果，iOS、Android均有效。
解决方案： * {-webkit-tap-highlight-color:rgba(0,0,0,0);}
8、iOS下如果input type=button属性disabled设置为true，会出现样式文字异常和背景问题。
解决办法：使用opacity=1；
9. 输入固定定位。 在 iOS 中，输入固定位于底部或顶部。 页面滚动一定距离后，点击输入（鼠标弹出），输入位置会出现在中间。
解决方案：内容列表框也是固定的，所以不会有固定的错位问题。
10.对于大于12px的移动字体，使用周围边框或背景色块。 某些 Android 文本很容易出现错误。
解决方案：可以使用1x整体放大（宽度、高度、字体大小等），然后使用变换缩放
11、移动端上传图片及兼容低端设备的问题
解决方案：在input中添加属性accept="image/*" multiple
12. 在Android上，占位符文本设置的列宽将向上。
解决方案：输入有占位符时不要设置列宽
13.溢出：滚动或自动； iOS上滑动滞后的问题
解决方案：添加-webkit-overflow-scrolling: touch;
