如何仅支持谷歌浏览器访问查看页面？|掘金平台

前言

这几天看了一些刚进入掘金平台时写的文章属性里没有兼容性选项，展示量和流量都不是很高，所以决定在接下来的一段时间里重写一些文章来保证输出。文中无水文，拒绝水文从我做起。

今天就聊吧。为了您更好的体验，本文讲一下如何只支持谷歌浏览器访问浏览页面？文中提到的浏览器兼容性问题，用这篇文章来证明我对浏览器兼容性问题并非一无所知，而是当时的其他因素导致选择了一刀切的方式来处理需求（我是不粘锅）。

嘿嘿，挖朋友~既然点进去了，不妨继续看下去吧^_^

思维概念

所谓浏览器兼容性问题是指由于不同的浏览器对同一段代码的解析不同，导致页面显示效果不统一的情况。

以上定义为白话，我们来看看百度百科的权威解释：浏览器兼容性问题也称为网页兼容性或网站兼容性问题，指的是网页在各种浏览器上的显示效果有可能是不一致导致浏览器和网页之间的兼容性问题。在网站的设计和制作中，可以做浏览器的兼容，使网站在不同的浏览器下都能正常显示。对于浏览器软件的开发和设计来说，更好的浏览器与标准的兼容性可以给用户更好的体验。

原因

浏览器兼容性问题的根本原因是浏览器使用不同的内核，在处理相同的事情时他们的想法不同。

如何理解上面的文字？即不同的浏览器使用不同的内核和不同的网页语言标准如HTML，以及不同的用户客户端环境（如不同的分辨率）属性里没有兼容性选项，导致显示效果达不到预期的效果。

解决方案

前端开发经常需要检查浏览器的兼容性。在这里我们推荐（Can I Use）这个查询网站。是为前端开发者定制的一个网站，用于查询CSS、JS、HTML5、SVG在主流浏览器中的特性和兼容性，可以很好的保证网页在浏览器中的兼容性。有了这个工具，我们可以快速了解代码在各种浏览器中的兼容性。我们强烈推荐一波。快去体验吧✈！界面效果如下图：

该工具只能向我们展示查询功能在不同浏览器上的兼容性。至于如何解决兼容性问题，就得看下面的解决方案了→

CSS 兼容性问题

1、不同浏览器中标签默认的内外边距不同

解决方案：*{margin: 0;填充：0;}

其实清除浏览器自带的默认样式，每个前端开发者使用的方法都差不多。下面是我选择清除默认样式的重置样式代码：

/** * 此文件用于清除浏览器样式 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a , abbr, 首字母缩略词, 地址, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i , center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article,放在一边, canvas, details, embed, figure , figcaption, 页脚, 页眉, hgroup, 菜单, 导航, 输出, ruby​​, 部分, 摘要, 时间, 标记, 音频, 视频 { padding:0;边距：0；边界：0；大纲：0； font-family: “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{ list-style-type: none; } textarea { resize: none; } /*去掉输入按钮的默认样式*/ input,button n,textarea { -webkit-appearance: none; -webkit-tap-highlight-color: rgba(255, 225, 225, 0); padding: 0; border: 0; outline: 0 ; } // 修改占位符属性默认文本颜色 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 属性

解决方案：{min-height: 200px; _height: 350px;}

7、IE9以下的浏览器不能使用不透明度

解决方案：Firefox/Chrome/Safari/Opera 浏览器使用不透明度； IE浏览器使用过滤器

不透明度：0.7; /*FF chrome safari opera*/ filter: alpha(opacity:70); /*使用ie过滤器，兼容ie*/

8、IE6/7 不支持 display:inline-block

解决方案：{display: inline-block; *显示：内联；}

9、光标兼容性问题

解决方法：统一使用{cursor:pointer;}

10、在IE6/7中，img标签与文字一起放置时，行高失效的问题

解决方案：文本和

全部设置为浮动

11、表格宽度固定，td自动换行

解决方法：表格设置{table-layout:fixed}，td设置{word-wrap:break-word}

12、相邻元素设置边距时，边距取最大值，舍弃小值

解决方法：不要让边距重叠，可以给子元素添加一个父元素，并设置父元素设置：{overflow: hidden}

13、一个标签的css状态顺序

解决方法：按顺序写链接–已访问–悬停–活动

14、IE6/7图片下方有空格

解决方案：img{display: block;}

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、div与p嵌套时出现空行

解决方案：li{display: inline;}

21、IE6默认div高度是字体显示的高度

解决方案：{line-height: 1px;} 或 {overflow: hidden;}

22、Chrome中的字体不能小于10px

解决方案：p{font-size: 12px;变换：比例（0.8);}

23、谷歌浏览器记住密码后输入框的背景色为黄色

输入{背景颜色：透明！重要； } 输入：-webkit-autofill，textarea:-webkit-autofill，选择：-webkit-autofill{ -webkit-text-fill-color: #333 !important; – webkit-box-shadow：0 0 0 1000px 透明插图！重要；背景颜色：透明！重要；背景图像：无！重要； transition: background-color 5000s ease-in-out 0s； }

24、CSS3 兼容前缀表示

编写内核浏览器

-webkit-

webkit 渲染引擎

铬/野生动物园

-moz-

壁虎渲染引擎

火狐

-ms-

三叉戟渲染引擎

IE

-o-

开启渲染引擎

歌剧

例子：

.box{ 高度：40px;背景颜色：红色；颜色：#fff; -webkit-border-radius：5px； // chrome/safari -moz-border-radius: 5px; // Firefox -ms-border-radius: 5px; // IE -o-border-radius: 5px; // Opera 边框半径：5px; }

JS 兼容性问题

1、事件对象兼容性

e = ev ||窗口事件

2、滚动事件兼容性

scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

3、冒泡兼容性

if (e.stopPropagation) { e.stopPropagation; } 其他 { e.cancelBubble=true; }

4、防止默认行为兼容

if (e.preventDefault) { e.preventDefault; } 其他 { e.returnValue = false; }

5、添加事件监听器兼容性

if (target.addEventListener) { target.addEventListener(“click”, fun, false); } else { target.attachEvent(“onclick”, fun); }

6、Ajax 创建的对象兼容性

var xhr = null; if (window.) { xhr = new ; } else { xhr = new ActiveXObject(“Microsoft XMLHTTP”); }

7、鼠标按键编码兼容性

函数鼠标 (ev) { var e = ev ||窗口.事件； if (evt) { return e.button; } else if (window.event) { switch (e.button) { case 1: return 0 ;案例4：返回1；案例2：返回2； } } }

8、在IE中，事件对象有x,y属性。在Firefox中，event.x的等价物是event.pageX，而IE中不存在event.pageX

x = event.x ？ event.x : event.pageX;

9、IE下，事件对象有srcElement属性，但没有target属性； Firefox下，事件对象有target属性，但没有srcElement属性

var source = ev.target || ev.src元素； var target = ev.relatedTarget || ev.toElement;

10、Firefox下需要使用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 = “火狐”; }

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设置为true为type=button属性禁用，会出现样式文字异常和背景问题

解决方法：使用 opacity=1;

9、输入是固定定位。在 iOS 下，输入固定在顶部或底部。在页面上滚动一定距离后，点击输入（弹出键盘），输入位置会出现在中间位置

解决方法：内容列表框也是固定定位，这样就不会出现固定错位的问题

10、手机字体小于12px，使用周边边框或背景色块，部分Android文字偏BUG问题

解决方法：可以使用整体放大1倍（宽度、高度、字体大小等），然后使用transform进行缩放

11、手机端上传图片兼容低端电脑的问题

解决方法：输入添加属性accept=”image/*” 多个

12、占位符文本的行高在Android上会更高

解决方法：输入有占位符时不要设置行高

13、溢出：滚动或自动；滑动卡在 iOS 上

解决方案：添加-webkit-overflow-scrolling: touch;