input输入框placeholder属性兼容IE浏览器
因为placeholder属性是html5的新属性，在浏览器兼容方面只兼容新版浏览器，而相对应版本较低的IE浏览器并不支持，以下是解决方案：

查看更多内容...

有时候，我们为了用户体验，需要禁用选择文本功能。
这需要用到一个CSS属性：user-select。
user-select有两个值：
none：用户不能选择文本
text：用户可以选择文本

查看更多内容...

双击(dblclick)的流程是：mousedown，mouseout，click，mousedown，mouseout，click，dblclick； 在双击事件(dblclick)，触发的两次单击事件(click)中，第一次的单击事件(click)会被屏蔽掉，但第二次不会。也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果。而不是一次双击事件(dblclick)结果和两次单击事件结果(click)。 所以可以使用计时的方式去除掉一个多余的单击事件就行了。

查看更多内容...

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm){
    类样式名称{
        background:-webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        -webkit-animation:slidetounlock 3s infinite;
        -webkit-text-size-adjust:none;
        }
    }
    @-webkit-keyframes slidetounlock{0%{background-position:-160px 0}100%{background-position:160px 0}
}

从IE 10开始，type=”text”的input在用户输入内容后，会自动产生一个小叉叉（X），方便用户点击清除已经输入的文本。
对于type=”password”的input则会在右方显示一个小眼睛的图标，占击这个图标可以显示已经输入的内容。
好是好，但有时候会画蛇添足，比如已经用js控制了这个功能的时候。
只要使用以下CSS代码可轻松实现隐藏IE浏览器自带的文本删除按钮和密码查看按钮。

查看更多内容...

思路：
input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。
DOM结构：

<div class="inpFilePhoto">
  <input type="file" name="file"/>
</div>
<div class="fileNameShow"></div>

查看更多内容...

解决safari浏览器下select高度问题

body:nth-of-type(1) select{
   line-height:32px;
}

@media screen and ( min-width: 212px){
  /*213px显示屏样式 LG Optimus One*/
}
@media screen and ( min-width: 319px){
  /*320px显示屏样式 苹果4/4S/5C/5S黑莓Z30 */
}
@media screen and ( min-width: 359px){
  /*360px显示屏样式 索尼Z1*/
}
@media screen and ( min-width: 383px){
  /*384px显示屏样式 黑莓Z10 谷歌 Nexus 6 LG Optimus G*/
}
@media screen and ( min-width: 399px){
  /*399px显示屏样式 三星galaxyNote*/
}

查看更多内容...

.test{
    /*IE 6 7 8*/
    FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ecedee,endColorStr=#fefefe);
    /* IE 10 */
    background: -ms-linear-gradient(top,#ecedee,#fefefe);
    /*火狐*/
    background:-moz-linear-gradient(top,#ecedee,#fefefe);
    /*谷歌*/
    background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ecedee), to(#fefefe));
    /* Safari 4-5, Chrome 1-9*/
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ecedee), to(#fefefe));
    /*Safari5.1 Chrome 10+*/
    background: -webkit-linear-gradient(top, #ecedee, #fefefe);
    /*Opera 11.10+*/
    background: -o-linear-gradient(top, #ecedee, #fefefe);
}   

现在很多网站都使用了自适应网页设计Response-Web-Design，以满足庞大的移动端用户群的需要。但是在技术上设计了自适应的网页之后，出于SEO的考虑，你还要照顾到如何对百度更友好，即告诉百度“我是自适应页面”，方便百度进行识别校验。

浏览器对自适应识别校验代码
在自适应网页设计中，我们使用meta标签来告诉浏览器网页的自适应规则。如：

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />

这个meta，user-scalable=yes是声明网页可以缩小放大。

查看更多内容...