[TOC] ### 前言 这里尽可能总结了你所遇到的样式bug，欢迎大家补充完善。 ### 去除浏览器或者手机自带的样式 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 ;不换行 ### input标签实时监测文本改变，判断文本的情况 Q:如题 A: 1 change 事件：触发条件：a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）b）当前对象失去焦点(onblur) 2 input事件，支持实时监听，支持复制粘贴的内容的监听，唯一的缺点是对低版本ie不支持。 3 propertychange ，ie专属，对ie适用，当属性发生改变时就可以监听到，前提其他属性一般情况下不会改变。改变的话，可以做下排除法。(多个事件使用同一个函数中间为空格) 最终使用：$("#demoinput").on(" input propertychange",function(){})