移动端使用rem.js,解决rem.js 行内元素占位问题

父级元素：

letter-spacing: -0.5em;font-size: 0;

子级元素：

letter-spacing: normal; display: inline-block; vertical-align: top;

 

便可解决。

问题剖析：

以input元素为例子：由于input元素是行内块元素，因此它所在的行会造成一个行框。而后行框的高度是和line-height属性相关的，line-height的说明以下：

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut."

 

line-height定义的是行的最小高度，当行内包含行内元素的时候，每一个行内元素会生成一个行内框，而后行内元素根据vertical-align属性对齐元素，而后取全部这些框的最高上边界和最低下边界，最高上边界和最低下边界之间的高度组成了实际的行高。

 

那么规范又是如何保证line-height定义的是行的最小高度的呢？

其实，参与行框造成的元素，除了这些实际存在的行内元素，还存在一个strut元素，这是一个假想的具备块元素的字号和行高的零宽元素，这个元素会参与最后实际的行高。

 

如今，咱们来看这个问题：

你这个页面运行以后，会在html元素上添加一个font-size属性，没有具体看这个大小和什么相关，我运行代码之后的结果是font-size: 50px;，下面以font-size: 50px;来进行说明。

由于font-size属性是能够继承的，因此你的div元素的font-size也是50px；由于line-height的默认值是normal，规范推荐的normal值是字体大小的1.0到1.2之间，和浏览器实现有关，咱们这里假设用的1.0；

第一个元素是p元素，是块级元素，不会生成行框，和line-height没有关系；

第二个元素是input元素，input元素是行内块元素，行内块元素生成的行内框是元素上外边界到下外边界（margin的上边界到下边界），而后strut这个假想元素生成了一个高为font-size * line-height = 50px * 1 = 50px的行内框，这两个行内框按照基线对齐的方式进行排列，而后取这两个行内框的最高上边界和最低下边界就是最后的行框。由于input元素生成的行内框远远没有50px，因此最后取得应该是strut的上边界和下边界，因此这个行框是50px，因此致使中间有"所谓"大段的空白。

 

综上，你能够设置div的font-size: 0px;这样假想的strut元素造成的行内框就不会高于input元素生成的行内框了。

或者设置input元素display: block;，这样input元素就是块级元素了，块级元素是不涉及行框的。