常见的JS和CSS兼容性问题

css兼容性问题

不同浏览器的标签默认的内外边距不同
```
*{margin: 0; padding: 0;}
```
清除浏览器自带的默认样式，可以自己定义，也可以使用别人写好的插件Normalize.css来清除默认样式
图片加a标签在IE9中会有边框
```
img{border: none;}
```
a标签蓝色边框
```
a{outline: none;}
```
cursor兼容问题
```
{cursor: pointer;}
```

table宽度固定，td自动换行

table {
  table-layout: fixed;
}
td {
  word-wrap: break-word;
}

a标签css状态的顺序

按照 link 、visited、hover、active 的顺序编写
ul标签在Firefox中默认是有padding值的，而在IE中只有margin有值
```
ul{margin: 0;padding: 0;}
```
ul或li浮动后，显示在div外

清除浮动；在ul标签后加<div style="clear:both"></div>来闭合外层div

在Chrome中字体不能小于10px

p {
  font-size: 12px; 
  transform: scale(0.8);
}

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

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;
}

CSS3兼容前缀表示

写法内核浏览器
-webkit- webkit渲染引擎 chrome/safari
-moz- gecko渲染引擎 Firefox
-ms- trident渲染引擎 IE
-o- opeck渲染引擎 Opera

写法	内核	浏览器
-webkit-	webkit渲染引擎	chrome/safari
-moz-	gecko渲染引擎	Firefox
-ms-	trident渲染引擎	IE
-o-	opeck渲染引擎	Opera

js兼容性问题

滚动事件的兼容

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

阻止冒泡的兼容

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

阻止默认行为的兼容

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

添加事件监听器的兼容

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

ajax创建对象的兼容

  var xhr = null；
  if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
  } else {
      xhr = new ActiveXObject("Microsoft XMLHTTP");
  }

移动端兼容性

禁止iOS识别长串数字为电话

<meta content="telephone=no" name="format-detection" />

禁止iOS弹出各种操作窗口
```
-webkit-touch-callout:none
```

禁止Android手机识别邮箱

<meta content="email=no" name="format-detection" />

禁止iOS和Android用户选中文字
```
-webkit-user-select:none
```
iOS下取消input在输入的时候英文首字母的默认大写
```
<input autocapitalize="off" autocorrect="off" />
```

Android下取消输入语音按钮

input::-webkit-input-speech-button {display: none}

在移动端修改难看的点击的高亮效果，iOS和安卓下都有效
```
* {-webkit-tap-highlight-color:rgba(0,0,0,0);}
```
iOS下input为type=button属性disabled设置true，会出现样式文字和背景异常问题
```
input { opacity=1;}
```
input为fixed定位，在iOS下input固定定位在顶部或者底部，在页面滚动一些距离后，点击input(弹出键盘)，input位置会出现在中间位置

内容列表框也是用fixed定位，这样不会出现fixed错位的问题
移动端字体小于12px使用四周边框或者背景色块，部分安卓文字偏上bug问题

可以使用整体放大1倍(width、height、font-size等等)，再使用transform缩放
在移动端图片上传图片兼容低端机的问题

input 加入属性accept="image/*" multiple
在Android上placeholder文字设置行高会偏上

input有placeholder情况下不要设置行高
overflow: scroll或auto；在iOS上滑动卡顿的问题

添加 -webkit-overflow-scrolling: touch;
iOS中日期如：2022-02-22 00:00:00格式的时间转时间戳不成功

需要将时间中的 '00:00:00' 去除之后才能转为时间戳

移动端1px边框问题

原先元素的border去掉，然后利用:before或者:after重做border，并transform的scale缩小一半，原先的元素相对定位，新做的border绝对定位

.border-1px{ 
    position: relative; 
    border:none; 
}

.border-1px:after{
    content: '';
    position: absolute; 
    bottom: 0;
    background: #000;
    width: 100%; 
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0; 
}

常见的JS和CSS兼容性问题

答案

css兼容性问题

js兼容性问题

移动端兼容性

评论