总览

inline-block 使用

.disply-line-block {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

一般的直接 inline-blcok 就可以了，但是 ie6,7 不行，不是不支持，而是支持的不好，所以先用 display:inline 先强制不换行。然后再 zoom:1 来触发元素的 hasLayout，就可以设置宽高了。
而前面加上*是只让 IE6,7 来识别。

placeholder 使用

注意 placeholder 是 html5 的新属性，只有一些比较新的浏览器才支持，所以 ie6~9 都是不支持的。想有效果，只能通过 js 来写 hack，就是监听 onfocus 和 onblur 方法来控制显示和消失。

//如果是ie6，7，8，9,就自主展示
if (
  navigator.userAgent.indexOf("MSIE") > 0 &&
  (navigator.userAgent.indexOf("MSIE 7.0") > 0 ||
    navigator.userAgent.indexOf("MSIE 8.0") > 0 ||
    navigator.userAgent.indexOf("MSIE 9.0") > 0)
) {
}

placeholder 的颜色修改

//placeholder的颜色
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #ffb8a1;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #ffb8a1;
  opacity: 1;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #ffb8a1;
  opacity: 1;
}
:-ms-input-placeholder {
  color: red;
} /*ie10*/

ie7 下的 js对象小 bug

这句对象申明，ie7 就会报错，不能有逗号：

var x = {
  a: 11
};

location.origin 这个东西 ie 是不支持的

还是使用 location.hostname 之类的吧

ie8 的 hack

css 属性后面加上\9就可以写出 hack ie6，7，8 的代码了，但是，ie9 也会支持

\0ie8 支持，但是 ie9 也支持

想单独 hack ie8，就加个新的选择器覆盖一下好了，比如:root。

chrome 上 input 自带的上下的按钮

去除 chrome 自带的上下的按钮

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 981909093@qq.com