css 怪事经验

表单元素bug

可以用type="tel"来代替type="number"解决Android 默认浏览器中 input 标签 number 类型的 placeholder 属性失效的问题,如果文字中有小数点时，不支持

textarea placeholder 过长时不能自动换行，可以用

::-webkit-input-placeholder::after{content:"第一行 A 第二行";}

来设定placeholder,设置时需注意元素本身的placehold需不为空

简写bug

在设置背景时，我们通常喜欢用缩写，

background:url(img.png)no-repeat 0 0/cover #ff0000;

这种写法在android2.3以下不支持，背景看不到,要特别写明background-size:cover;

背景bug

移动端常用双倍背景图，再设置background-size减倍，可以看起来图片更清晰。当repeat背景时，即使设置的仅仅是单向重复，而在部分终端显示中，另一个轴向的背景也会多重复出一像素，长了个边。解决办法是设置重复轴的值为auto,

repeat-x,则设置background-size:auto 100px;

米4部分机型的webview上动画图片模糊

在米4的内嵌H5页面中，动画的scale属性不能为0，会引起图片渲染异常，可用其它效果代替或设为一个较小但不为0的值

-webkit-transform:scale(0.5);