> 這里盡可能總結了你所遇到的樣式bug,歡迎大家補充完善。
[TOC]
### 去除瀏覽器或者手機自帶的樣式
Q:自帶元素的樣式,太丑了,想去掉
A:-webkit-appearance :none ;
### 頁面的高度得不到100%
Q:頁面的高度得不到100%
A:需要設置html,body的高度均為100%
~~~
html,body{
width:100%;
height:100%;
}
~~~
### 輸入框內文字的光標顯示不統一的,有的為文字大小,有的為行高
Q:如題
A:設置padding:top=bottom ,模擬實現垂直居中的光標
### cke-editor 在ie下不支持復制粘貼
Q:如題
A:打開IE,點擊“工具”菜單,選擇“兼容性視圖設置”,勾選“在兼容性視圖中顯示所有網站”選項即可。
### input type=file 自定義樣式
Q:如題
A:通過絕對定位,覆蓋原來的樣式,并且用父標簽觸發事件,opacity: 0 ; /* 實現的關鍵點 */ filter:alpha(opacity= 0); /* 兼容IE */;其中js獲取文件相關信息:
~~~
onchange=uploadfile(this.value);
var filestr=filename;
var pos=filestr.lastIndexOf("\\");
filestr=filestr.substring(pos+1);
~~~
### 輸入框的藍邊以及輸入提示的底色黃色
Q:如題
A:1 藍邊 :outline:none ;2 黃底 :input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}
### 輸入框的提示文字的顏色可以修改么
Q:如題
A: 代碼如下,顏色、行高、大小等都可以修改。`::-webkit-input-placeholder{}`
~~~
/* WebKit browsers */
::-webkit-input-placeholder { color: #777; }
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder { color: #777; opacity: 1; }
/* Mozilla Firefox 19+ */
::-moz-placeholder { color: #777; opacity: 1; }
/* Internet Explorer 10+ */
:-ms-input-placeholder { color: #777; }
~~~
### 習慣性的寫最小高度,如何處理兼容問題?
Q:如題
A: 代碼如下,可以放心的使用,建議寫到混合函數mixin中。如果你不考慮低版本瀏覽器和ie,直接用min-height即可。
~~~
/*最小高度兼容代碼*/
min-height: 500px;
height:auto!important ;
height: 500px;
overflow: visible;
~~~
### 文本域(textarea)右下角的可控區域是什么?如何去掉
Q:如題
A: resize: none;
### 英文以及數字不換行,導致超出顯示
Q:如題
A: word-break: break-all; 詳細的可以自己去了解。額外補充:white-space:nowrap ;不換行
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi