精确控制DIV的高度

一般来说，如果我们没有设定一个DIV的高度，那么其高度就是由下面几个参数确定：

·         font-size

·         padding-top, padding-bottom

·         margin-top, margin-bottom

当上面几个参数确定后，整个DIV的高度应该就是确定了。但是，在移动设备上，就会发生变化，主要是字体的高度，并不严格按照设定的font-size显示，而是会有1个像素的误差，如果只有一个DIV，那还不明显，但是如果有多个DIV上下排列起来，而且你还要跟背景图搭配起来，那么误差就会放大到比较明显的地步。

譬如，本来在PC上效果是这样的：

所有文字与背景都精确配合，位置显示的很正确，看起来效果也很好。可是到了Mobile下，就变成了这样：

下面几行的文字有明显的上移，导致与背景配合错位。

 

这个问题查了半天，最终是发现在Mobile设备上font-size与PC不一致导致，但是又不能修改font-size，因为不同的Mobile设备上font-size也是不一样的。

问题解决有两个办法：

1、 设定DIV的高度；

2、 设定line-height；

转载于:https://my.oschina.net/tywali/blog/676953