人性化的处理:
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 搜索框内侧的左边距