“这是我参加2022年第一次更新挑战的第12天，活动详情请查看：2022年第一次更新挑战”

前言

这几天看了一些自己刚进掘金平台时写的文章，展示量和访问量都不是很高360兼容浏览器，所以决定在接下来的一段时间重写一些文章，保证产出的文章没有水文，拒绝水文从我做起。

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

嘿，各位挖坑的小伙伴们~既然点进去了，何不继续往下看呢^_^

思维观念

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

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

原因

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

如何理解上面的文字呢？ 即不同的浏览器采用不同的内核，支持的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, acronym, address, 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, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    padding:0;
    margin:0;
    border:0;
    outline: 0;
    font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    word-wrap:break-word;
}
html, body {
    width: 100%;
    height: 100%;
}
a {
    text-decoration: none;
    -webkit-tap-highlight-color:rgba(255,255,255,0);
}
ul, ol {
    list-style-type: none;
}
textarea {
    resize: none;
}
/*去除input button默认样式*/
input, button, textarea {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(255, 225, 225, 0);
    padding: 0;
    border: 0;
    outline: 0;
}
// 修改placeholder属性默认文字颜色
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #999;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    /* Mozilla Firefox 4 to 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;
}
复制代码

除了自己定义清除默认样式的代码外，还可以选择引用别人写的成熟插件.css来清除默认样式；

2、IE9中给图片添加标签时会有边框

解决方案：img{:none;}

3、IE6及以下版本中的浮动元素浮动边有双边距

解决办法：不使用，使用

4、IE6及以下版本中，部分块元素有默认高度

解决办法：设置元素font-size:0；

5、标签蓝色边框

解决方案：a{: 无;}

6. IE6不支持min-属性

解决办法：{min-:200px; : 350 像素;}

7.IE9以下浏览器无法使用

解决办法： ///Opera浏览器使用； IE浏览器使用

opacity: 0.7; /*FF chrome safari opera*/
filter: alpha(opacity:70); /*用了ie滤镜,可以兼容ie*/
复制代码

8. IE6/7不支持：-block

解决方案：{:-block; *：;}

9. 兼容性问题

解决办法：统一使用{:;}

10、IE6/7下，img标签和文本放在一起时，line-失败

解：字面意义和

两者都设置浮动

11.表格宽度固定360兼容浏览器，td自动换行

解决办法：table设置{table-:fixed}，td设置{word-wrap:break-word}

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

解决方案：为了防止边距重叠，可以给子元素添加一个父元素，并设置父元素设置：{: }

13.标签的css状态顺序

解决办法：按照link----hover--的顺序写

14、IE6/7下图片下方有间隙

解决方案：img{: 块;}

15. ul标签在 中默认有值，但仅在 IE 中有值

解决方案：ul{:0;:0;}

16、IE中指定li的高度后，出现排版错误

解决办法：设置线路-

17、ul或li浮动后显示在div之外

解决办法：清除浮动； 必须添加在 ul 标签之后以关闭外部 div

18、ul设置为float后，在IE中会变大

解：ul{: ;}, li{list-style-: ;}

19.当li中的内容超过长度时，会显示省略号

li{
    width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}
复制代码

20、div嵌套p时出现空行

解：li{:;}

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

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

22、字体大小不能小于10px

解决方案：p{font-size: 12px; ：比例（0.8）；}

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

input{
    background-color: transparent !important;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
    -webkit-text-fill-color: #333 !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    background-color: transparent !important;
    background-image: none !important;
    transition: background-color 5000s ease-in-out 0s;
}
复制代码

24. CSS3兼容的前缀表示

编写内核浏览器

--

渲染引擎

/

-莫兹-

壁虎渲染引擎

-多发性硬化症-

渲染引擎

IE

-o-

欧佩克渲染引擎

歌剧

喜欢：

  .box{
       height: 40px;
       background-color: red;
       color: #fff;
       -webkit-border-radius: 5px; // chrome/safari
       -moz-border-radius: 5px; // Firefox
       -ms-border-radius: 5px; // IE
       -o-border-radius: 5px; // Opera
       border-radius: 5px;
   }
复制代码

JS兼容性问题

1. 事件对象的兼容性

e = ev || 。事件

2. 兼容滚动事件

= .. || 。身体。;

3.防止冒泡相容

  if (e.stopPropagation) {
      e.stopPropagation();
  } else {
      e.cancelBubble=true;
  }
复制代码

4. 防止默认行为的兼容性

  if (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 (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
  } else {
      xhr = new ActiveXObject("Microsoft XMLHTTP");
  } 
复制代码

7. 兼容鼠标按键编码

  function mouse (ev) {
      var e = ev || window.event; 
      if (evt) {
          return e.button;
      } else if (window.event) {
          switch (e.button) {
              case 1: return 0;
              case 4: return 1;
              case 2: return 2;
          }
      }  
  }
复制代码

8.在IE中，事件对象有x和y属性，event.pageX相当于IE中的event.x，但event.pageX在IE中没有

x = 事件.x ? 事件.x : 事件.pageX;

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

  var source = ev.target || ev.srcElement;
  var target = ev.relatedTarget || ev.toElement;
复制代码

10、需要使用CSS来禁止选择网页内容，在IE中使用JS来禁止

-moz-user-select: none; // Firefox 
obj.onselectstart = function() {return false;} // IE
复制代码

11. 在 IE 中工作正常，但在 IE 中工作不正常

if (navigator.appName.indexOf("Explorer") > -1) {
    document.getElementById('element').innerText = "IE";
} else {
    document.getElementById('element').textContent = "Firefox";
}
复制代码

12、IE下可以使用const关键字或var关键字定义常量； IE下只能使用var关键字来定义常量

解决方案：统一使用var关键字定义常量

移动兼容性问题

1. 禁止iOS将长串号码识别为电话

解决方案：

2.禁止iOS弹出各种操作窗口

解决方案：--touch-:none

3、禁止手机识别邮箱

解决方案：

4.禁止iOS和用户选择文本

解决方案： --user-:none

5、iOS下，取消输入时英文首字母默认大写

解决方案：

6. 按 按钮取消语音输入

解决办法：输入::--输入-- {: none}

7.修改移动端丑陋点击的高亮效果，iOS、下均有效

解决方案： * {--tap--color:rgba(0,0,0,0);}

8、iOS下如果input的type=属性设置为true，会出现样式文本和背景异常的问题

解决办法：用=1；

9、输入固定定位。 在iOS下，输入固定在顶部或底部。 页面滚动一定距离后

浏览器之家

，点击输入（弹出键盘），输入位置会出现在中间位置

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

10、手机字体小于12px，使用边框或者背景色块，部分文字偏向上。

解决方案：可以使用整体放大1倍（width、font-size等），然后使用zoom

11.移动端上传的图片兼容低端机

解决办法：在input中添加 = "image/*"

12.上方文字设置的行高会更高

解决办法：输入有大小写时不要设置行高

13. ：或自动； iOS上滑动的问题

解决办法：添加---：触摸；