HTML和CSS中的小坑需注意

iphone6发布，新一轮移动端的适配又要开始了，小伙伴们纷纷

言归正传，浏览器版本的更新加上技术的发展导致一些我们用到的属性突然失效或者出现意想不到的事情，今天就说那么几个我遇到的

One：-webkit-text-size-adjust:none/100%

这个属性是用来解决chrome下无法设置字体小于12px的，但PC端chrome27的时候停止了对其的支持，所以以前设置的在现在就无效了，不过移动端还是可以使用的，亲测三星盖世自带的安卓浏览器和iphone的safari还是支持这个属性，大家可以安心用之，至于它取值none/100%的差异性大家可以参考http://www.document-write.com/html/xhtml-css/42.html，那么大家会问PC端如果我要chrome下设置小于12px咋个办呢？你可以使用css3属性transform:scale()或者zoom（这两个有局限性和兼容性的问题，下面我会讲到），当然你可以使用图片。。。

Two：transform:scale()和zoom

上面两个属性都有缩放和放大的功能，一个是css3的属性，一个是IE的私有属性，但chrome和safari也支持（其余webkit内核没测，不过应该也是有效的），firefox是不支持的。前一个是不支持内联元素的而且它是在在不改变元素在文档流中所占空间的前提下，对元素的显示进行放大或缩小，所以他有可能导致相邻元素覆盖，不过transform:scale()可以用来解决移动端响应区域小的问题，这个我就不详述了。zoom是对所有元素都有效，而且zoom的放大缩小是不会出现相邻元素覆盖的问题，看栗子http://jsbin.com/hogete/3/（请在chrome下打开）。如果相邻两个元素有一定的左右margin，而且他们的父元素宽度是固定的（本来是1180px，响应式时变成980px），用了transform:scale()你就要改变他们的margin值，而zoom就不用，详情前看携程的一个实例http://huodong.ctrip.com/的下图部分，请分别用firefox和chrome查看缩小窗口与未缩小之前代码的区别。

博主表达能力有限，如有不当或疑问还请轻喷。

Three：HTML5中的placeholder

HTML5的发展，我们用H5的东西也越来越多，input文本框或是textarea文本域都支持placeholder，但当我们想改变placeholder默认文本内容的颜色时怎么办呢，各家浏览器都是不同的。webkit内核的需要这样-webkit-input-placeholder { color:#F00; }，firefox是input:-moz-placeholder { color: #F00;}，不过19及以上版本的firefox是这样input::-moz-placeholder { color: #F00; opacity:1;}，为啥呢，因为firefox浏览器默认样式改变了它的透明度IE就是这样（10及以上才支持）input:-ms-input-placeholder { color: #F00 ; }，当然你也可以用js来解决这种繁琐的兼容性问题。

博主吃饭去了，剩下的一个下一篇吧，大家愉快度周末。。。