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);