1.清除float浮动

.clearfix {
  *zoom: 1;
}
.clearfix:before, .clearfix:after {
  content: ' ';
  display: table;
}
.clearfix:after {
  clear: both;
}
2.radio,checkbox写法 注:这种写法点后面的文字也可选中前面的选择框
<input type="radio" id="idRadio" /> <label for="idRadio" >今天</label>
<input type="checkbox" id="idCheck" /> <label for="idCheck" >今天</label>
3.在手机端去掉以下标签的各种自带样式
a,select,span,i,input {
  -webkit-tap-highlight-color: transparent; //无色
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);//这个地方的设置最好是用rgba
  -webkit-appearance: none;
  outline: none;
  border: 0;
  line-height: normal;
  background: none;
}
4.解决手机web字号不一
body{ -webkit-text-size-adjust:none;}
5.去除ie11输入框的X
input[type=text]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=text]::-ms-reveal {  display: none; width : 0; height: 0; }
6.去掉chrome input自动填充颜色
input:-webkit-autofill {
   box-shadow: 0px 0px 0px 1000px #fff inset !important;
}
7.清除chrome下input自动记住密码
<input style="display: none">
<input type="password" autocomplete="off" placeholder="请输入密码">
8.hack的使用
.box{
    background-color:#f1ee18;     /*所有识别*/
    background-color:#00deff\9;   /*'\9'IE6、7、8、9、10识别*/
    background-color:#00deff\0;   /*'\0'IE8、9、10识别*/
    background-color:#00deff\9\0; /*'\0'IE9、10识别*/
    +background-color:#a200ff;    /*'+'IE6、7识别*/
    _background-color:#1e0bd1;    /*'_'IE6识别*/
}
IE6能识别*,不能识别 !important;
IE7能识别*,能识别!important;
FF不能识别*,但能识别!important;
"*" IE6、IE7可以识别.IE8、FireFox不能.
:root #test { background-color:purple\9; } :root是给ie9的,网上流传了个版本是 :root #test { background- color:purple\0;},这个,新版opera也认识,所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera,必须加个\0,不然firefox,chrome,safari也都认识。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

.test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */
.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */

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

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

8.web网站屏幕适配CSS写法

 @media screen and (max-width: 800px) {
    body{
        background: #ccc;
    }
 }

results matching ""

    No results matching ""