移动web前端开发之常见bug

1.ios6修复了css position:fixed 1像素抖动的bug，不过引出另一个bug：当给指定元素添加 position:fixed时首次加载页面完成后，滑动整个网页，添加此样式的元素 会跟随页面滚动（目的是固定此元素）

解决方案：

为其元素添加如下css属性即可：

-webkit-transform：translate3d(0,0,0)（具体原因不知）

2.当竖屏的屏的时候显示效果不错，但是当横屏的时候，字体会变大，无论你怎么设置字体大小都无效

解决方案

浏览器默认会根据当前屏幕和内容作调整，在webkit内核的浏览器中只需要-webkit-text-size-adjust:none就禁止自动调整，至于是否全局活局部使用看自己的

项目需求。

3.字级单位。根据上面的图表（红色部分为默认，当然不同的浏览器渲染默认值不一样，具体还需各位实测）可以看出，我们只需设置html根元素字体大小为75%，对应的px值就是12，这样我们可以很方便的设置页面的宽高和字体大小，当然单位是rem，这样参考对象才会永远是html而不是父元素，当需要变化的时候，只需改变html的大小其他的元素都会相应变化，方便极了。

我们常用的有px、pt、百分比、em等，很惭愧，我最近才知道有rem，而且是个相当不错的朋友。前面的几个单位大家都比较熟悉，不知道有没有和我一样小白的才知道rem的呢，我们就介绍一下这个新朋友，它是随着css3来到这个世界。

我们之前用em、百分比的时候遇到的问题就是计算，而且当嵌套的层级太多时就会非常难以把控，而用px则被固定死了，现在我们用rem完全不用担心这个问题，因为rem的参照对象只有根节点。我们只需设置根节点的大小，所有子节点都只需参照它来设计就可以，下面是px、em、百分比和pt的对比

根据上面的图表（红色部分为默认，当然不同的浏览器渲染默认值不一样，具体还需各位实测）可以看出，我们只需设置html根元素字体大小为75%，对应的 px值就是12，这样我们可以很方便的设置页面的宽高和字体大小，当然单位是rem，这样参考对象才会永远是html而不是父元素，当需要变化的时候，只需改变html的大小其他的元素都会相应变化，方便极了。

4.盒子边框溢出

当我们指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。按照盒子模型，就会发现该元素的左右边框各1个像素会溢了，导致出现横向滚动条，这时候我们可以为其添加-webkit-box-sizing:border-box用来指定该盒子的大小包括边框的宽度。