CSS處理的細節

標籤：str   ubi   max   cal   橫屏   neu   單元素   不能   img   

人性化的處理：

　　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 搜尋方塊內側的左邊距

 

CSS處理的細節