产生原因：我们写代码的时候习惯在结束标签的后面添加换行符，这个时候就会产生空白符。但是不同浏览器对空白符的理解是不同的，IE6/7会忽略掉此空白符，正常显示内容；IE8以上的IE浏览器以及FF、chrome等的标准浏览器会产生空白bug问题，其中chrome中显示的是8px的空白bug，但是其他浏览器则是4px的空白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的前世今生
原文：http://www.cnblogs.com/3box/p/4573443.html