产生原因:我们写代码的时候习惯在结束标签的后面添加换行符,这个时候就会产生空白符。但是不同浏览器对空白符的理解是不同的,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:;/* 所有浏览器 */
*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:;
}

在父元素中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的前世今生

display:inline-block的空白bug问题的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  3. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  4. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  5. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  6. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  7. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

  8. display:inline、block、inline-block区别

    display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...

  9. display:inline、block、inline-block的区别(摘抄)

    display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...

随机推荐

  1. 最最简单的~WordCount¬

    sc.textFile("hdfs://....").flatMap(line =>line.split(" ")).map(w =>(w,1)). ...

  2. Form_通过Custom.pll新增菜单项(案例)

    2014-05-31 Created By BaoXinjian

  3. dede图片横向滚动

    <div id=demo style="overflow:hidden; width:960px;" > <table border=0 align=" ...

  4. 练习JavaScript实现梯形乘法表 效果:

    表格用html中的table,tr,td,然后利用for语句实现,循环输出行和列,再根据行列的数量进行乘法运算,第一个for循环输出9行, 然后内嵌一个for,在条件表达式中取第一个for循环的值然后 ...

  5. eclipse ide for java ee developers 开发环境搭建(j2ee)

    转载自:http://www.iteye.com/topic/982182 真的是一片很不错的文章啊! 使用eclipse真的有年头了,相信java程序员没有不知道它的,最近在给团队中新来的应届生做指 ...

  6. window和nodejs作用域区别(待续)

    //这是在浏览器环境下,chrome下 var n =2 ; var obj={ n:4, fn1:(function(){ console.log("fn1->this =" ...

  7. 为什么选择centos,而不是Dibian、Ubuntu【转】

    我们运行着一些全球最大的互联网的营运,因此我们对可靠性和稳定性非常重视,是我们的第一要务.为此,我们只使用Linux来支撑顾客的系统.但是,我们应该使用哪一个Linux的发行版?答案是,CentOS. ...

  8. eclipse 自动补全

    在使用过程中问题又来了, 当按下空格键时会把第一行的内容自动上屏,其实很多时候就是想输一个空格而已. 解决办法: 取消之前的修改: "Auto Activation triggers for ...

  9. Java学习笔记——static关键字与静态的使用方法

    static:可以修饰成员变量和成员方法. 当变量被static修饰后,则其可以直接被类名调用.类名.成员. static特点: 随着类的加载而加载: 优先于对象存在: 被所有的对象共享,节省空间,但 ...

  10. elasticsearch开启脚本及使用

    开启script: Scripting settingsedit The script.disable_dynamic node setting has been replaced by fine-g ...