CSS处理的细节

人性化的处理：

　　textarea 默认只能垂直拖动，防止宽度改变破坏布局。

textarea {

　　resize: vertical;

　}

　　汉字字号小于12px不易阅读，为<small>元素设置默认值为12px。

small {

　　font-size: 85.7%;

  }

　　label元素默认光标设为 [手型]，意示此处可点击。

label {

　　cursor:pointer;

  }

 

考虑移动设备：

　　通常iPhone 横屏时默认会放大文字，如果页面已经做了响应式，就可能会破坏布局：

html {

　　-ms-text-size-adjust: 100%;

　　-webkit-text-size-adjust: 100%;

　　text-size-adjust: 100%;

 }

 

考虑响应式：

　　IE6以上浏览器，图片默认支持缩放。

img {

　　border: 0 none; //去除IE6-9 和Firefox 3中a内部img元素默认的边框

　　width: auto\9; //修正IE8图片小时BUG

　　height: auto; //防止img 指定height时图片高度不能按照宽度等比缩放，导致图片变形

　　max-width: 100%; //让图片支持响应

　　vertical-align: top; //去除现代浏览器图片底部的空隙

　　-ms-interpolation-mode: bicubic; //修复IE7图片缩放失真

  }

 

跨平台最佳font-family:

　　body,button,input,select,textarea {

　　　　font-family: 'helvetica neue', arial,'hiragino sans gb',stheiti,'wenquanyi micro hei', \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, sans-serif;

　　}

　　code,kbd,pre,samp {

　　　　font-family: monaco, menlo, consolas, 'courier new',  courier, monospace;

　　}

 

解决表单渲染问题：

　　由于表单元素是由系统渲染的控件，其UI表现具有特殊性。为了尽可能减少不同平台间的差异

　　input[type="search"]::-webkit-search-cancel-button; //隐藏清除按钮

　　input[type="search"]::-webkit-search-decoration{ -webkit-appearance: none; } //移除 OS X中的Safari5 和 Chrome 搜索框内侧的左边距