display:inline-block的空白bug问题

产生原因：我们写代码的时候习惯在结束标签的后面添加换行符，这个时候就会产生空白符。但是不同浏览器对空白符的理解是不同的，IE6/7会忽略掉此空白符，正常显示内容；IE8以上的IE浏览器以及FF、chrome等的标准浏览器会产生空白bug问题，其中chrome中显示的是8px的空白bug，但是其他浏览器则是4px的空白bug。所以我们需要一套完整的解决bug的方案。

方法一：由于产生bug的原因是我们代码结构的问题，所以我们可以对症下药，调整代码结构，使其不出现空白符。例如下面代码：

结构一：

 

结构二：

 

结构三：

 

结构四：

 

备注：对于结构四的注释方法不太常见，不过也是可以解决问题的。

方法一的优缺点：

通过结构标签来解决此bug，虽然问题是解决了，但可以说不能称作是技巧。而且上面的方法只适合于写静态页面的时候，一旦你的HTML不是自己写，而是后台生成，就比如CMS来说，标签后台生成，此时，我想大家又要骂街了，这可怎么办？其实我们除了上面的方法，还可以使用CSS来解决的。

方法二：

针对像素，通过负向的margin来解决问题， 如margin-right: -4px； *margin-right: 0px。

这个方法一般不用，此时并没有解决chrome中的空白bug问题。

方法三：

因为空白字符也是字符，所以可以设置父元素的font-size：0，子元素重新定义font-size大小；但是这种方法在Safari中是无效的。

 

方法四：

 

丢失结束标签，但是不支持使用，这种方法虽然能达到各浏览器的兼容，但还是有一个前提，那就是“DOCTYPE”要选择对，在“XHTML”下可就问题又出来了.

 

方法五：

 

通过js去掉父元素的孩子节点中的文本节点（即nodeType为3的节点），但是此方法我经过测试是行不通的，因为IE浏览器与标准浏览器对文本节点的显示是有差异的。IE浏览器会忽略掉文本节点，但是标准浏览器不会，所以上面的js方法只可以解决标准浏览器中的bug问题，对于IE8以上的浏览器还是无效的。

 

最终方法六：

 

全兼容的样式解决办法：

 

.dib-wrap {
    font-size:0;/* 所有浏览器 */
    *word-spacing:-1px;/* IE6、7 */
}
.dib-wrap .dib{
    font-size: 12px;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align:top;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
/* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
     .dib-wrap{
            letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
    }
}
.dib {
    display: inline-block;
    *display:inline;
    *zoom:1;
}

 

在父元素中font-size为0，用来兼容chrome；然后设置letter-spacing来兼容Safari。

针对safari的hack

以改变下拉框的高度为例

 

写法1：

@media screen and (-webkit-min-device-pixel-ratio:0){ select{ line-height: 36px; } }

 写法有点复杂，但是有效，最后同事给推荐了一种简单的写法，见写法2

 

写法2：     

  select{ [;line-height: 36px;] }

 推荐此种写法，简单有效

 参考文章：inline-block的前世今生

转载于:https://www.cnblogs.com/3box/p/4573443.html