浏览器兼容性 css 笔记

浏览器兼容性

资料：https://juejin.im/post/59a3f2fe6fb9a0249471cbb4

清除ie10 select 框的下拉箭头：

/* 清除ie的默认选择框样式清除，隐藏下拉箭头 */
select::-ms-expand { display: none; }

/* 修改placeholder样式 */
input::-webkit-input-placeholder{
    color:red;
}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:red;
}
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:red;
}
input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
    color:red;
}

/* 在 Chrome and Safari中，当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果，下面的代码可以修复此情况：*/
.cube {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;
 
   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */
}

css 浏览器重置样式汇总：

html,
body {
	height: 100%;
	width: 100%;
}

body {
  font-family: Helvetica, sans-serif;
}

* {
	padding: 0;
	margin: 0
}

ul,
li {
	list-style: none;
}

a {
  text-decoration: none;
}

:link, :visited { text-decoration:none }

// Firefox 会默认img 为内敛元素，如同span
// 不设置inline-block，则Firefox 下css 设置 width、height 无效
img {
	border-style: none;
	display: inline-block;
}

input,
textarea,
img,
video,
object { box-sizing: border-box; }

[hidden] {
	display: none;
}

// 异步加载图片时，保持文档流中的占位信息，使体验更加良好
// 如果使用透明图片占位，则会发送没必要的请求
img { visibility: hidden; }
img[src] { visibility: visible; }

（待补充）

至此，结束。