产生原因:我们写代码的时候习惯在结束标签的后面添加换行符,这个时候就会产生空白符。但是不同浏览器对空白符的理解是不同的,IE6/7会忽略掉此空白符,正常显示内容;IE8以上的IE浏览器以及FF、chrome等的标准浏览器会产生空白bug问题,其中chrome中显示的是8px的空白bug,但是其他浏览器则是4px的空白bug。所以我们需要一套完整的解决bug的方案。
![](https://i-blog.csdnimg.cn/blog_migrate/7c645e0da286dce02d8491d442fa23d0.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/c610d9bd9ea8ba90b6b338111a7705c0.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/ca91d9b5e82a160efac689e9a19566e3.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/bdcac2adb0fca71cb07e0f3c5418ab91.jpeg)
方法一的优缺点:
通过结构标签来解决此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的前世今生