关于css样式总结

表单样式表

移除input=number的上下箭头

在chrome下：

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{    -webkit-appearance: none !important;    margin: 0; }

Firefox下：

input[type="number"]{-moz-appearance:textfield;}

第二种方案：

将type=”number”改为type=”tel”，同样是数字键盘，但是没有箭头。

---

禁止textarea缩放

textarea {resize: none;}

---

CSS3中新增了resize缩放属性

none：用户不能操纵机制调节元素的尺寸；both：用户可以调节元素的宽度和高度；horizontal：用户可以调节元素的宽度；vertical：让用户可以调节元素的高度；inherit：默认继承。

---

placeholder字体颜色

::-moz-placeholder {    color: #909090;    opacity: 1;}:-ms-input-placeholder {    color: #909090;}::-webkit-input-placeholder {    color: #909090;}

---

段落样式表

多行省略号

.box {    text-overflow:-o-ellipsis-lastline;    text-overflow:ellipsis;    display: -webkit-box;    -webkit-line-clamp: 3;    -webkit-box-orient: vertical;    overflow: hidden;}

---

其他

内容不满一屏时底部永远居于页面底部(支持box-sizing的浏览器版本)

html,body{height: 100%;}body{margin:0;}  .page{      box-sizing: border-box;      min-height: 100%;      padding-bottom: 50px;  }  footer{      height: 50px;      margin-top: -50px;      background:red;}  <div class="page">主要页面<br></div>  <footer>底部</footer> 

---

透明度兼容ie8

.box {    background: rgb(0, 0, 0);    /*不支持rgba的浏览器*/    background: rgba(0,0,0,.5);  /*支持rgba的浏览器*/    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);    /*IE8支持*/}//IE9同时支持RGBA和filter，导致两个重叠，透明效果变差，补充如下：<!--[if lt IE 9]>   <style type="text/css">   .box {       background:transparent;   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);       zoom: 1;    }    </style><![endif]-->

解释下#7f000000，第一部分是#号后面的7f。是rgba透明度0.5的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下：

透明度 IEfilter 0.1 19 0.2 33 0.3 4C 0.4 66 0.5 7F 0.6 99 0.7 B2 0.8 C8 0.9 E5

---

css hack

条件注释法

这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。举例如下

只在IE下生效<!--[if IE]>这段文字只在IE浏览器显示<![endif]-->只在IE6下生效<!--[if IE 6]>这段文字只在IE6浏览器显示<![endif]-->只在IE6以上版本生效<!--[if gte IE 6]>这段文字只在IE6以上(包括)版本IE浏览器显示<![endif]-->只在IE8上不生效<!--[if ! IE 8]>这段文字在非IE8浏览器显示<![endif]-->非IE浏览器生效<!--[if !IE]>这段文字只在非IE浏览器显示<![endif]-->

---

类内属性前缀法

• “-″减号是IE6专有的hack
• “\9″ IE6/IE7/IE8/IE9/IE10都生效
• “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
• “\9\0″ 只对IE9/IE10生效，是IE9/10的hack

---

选择器前缀法

• html 前缀只对IE6生效
• +html +前缀只对IE7生效
• @media screen\9{…}只对IE6/7生效
• @media \0screen {body { background: red; }}只对IE8有效
• @media \0screen,screen\9{body {background: blue; }}只对IE6/7/8有效
• @media screen\0 {body { background:green; }} 只对IE8/9/10有效
• @media screen and (min-width:0\0) {body {background: gray; }} 只对IE9/10有效
• @media screen and (-ms-high-contrast:active), (-ms-high-contrast: none){body { background: orange; }} 只对IE10有效