IE6、7下html标签间存在空白符,导致渲染后占用多余空白位置的原因及解决方法
2015-04-01 17:09
288 查看
直接上图:
原因:该div包含的内容是靠后台进行print操作,输出的。如果没有输出任何内容,浏览器会默认给该空白区域添加空白符。
在IE6、7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字体的属性,所以也就出现“多余占位”的bug。
解决方法:
一、让html标签相接输出。例如:<div></div>。 ——太过麻烦,代码也不规则,不好维护。
二、设置font-size:0; ——不能完美fix~
二、使用注释符<!-- -->。例如:<div><!-- --></div>,让div中间不存在空白符。 ——这种虽然能够fix问题,但是不够好
三、使用<wbr>标签。例如:<div> <wbr><div>。 ——这样,就可以让浏览器不自动给标签内容添加空白符,又不会出现多余的信息显示在页面上,完美解决~
2015-06-04 补充:
火狐对<wbr>标签支持不是很好,还是会认为<wbr>会占位,是字符。
所以,终极解法就是<wbr style="display:none;" />
补充知识:
wbr标签:作用是软断行,浏览器会根据容器的宽度,对文字内容进行自动断行
兼容性:
查看网址:http://www.quirksmode.org/oddsandends/wbr.html
原因:该div包含的内容是靠后台进行print操作,输出的。如果没有输出任何内容,浏览器会默认给该空白区域添加空白符。
在IE6、7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字体的属性,所以也就出现“多余占位”的bug。
解决方法:
一、让html标签相接输出。例如:<div></div>。 ——太过麻烦,代码也不规则,不好维护。
二、设置font-size:0; ——不能完美fix~
二、使用注释符<!-- -->。例如:<div><!-- --></div>,让div中间不存在空白符。 ——这种虽然能够fix问题,但是不够好
三、使用<wbr>标签。例如:<div> <wbr><div>。 ——这样,就可以让浏览器不自动给标签内容添加空白符,又不会出现多余的信息显示在页面上,完美解决~
2015-06-04 补充:
火狐对<wbr>标签支持不是很好,还是会认为<wbr>会占位,是字符。
所以,终极解法就是<wbr style="display:none;" />
补充知识:
wbr标签:作用是软断行,浏览器会根据容器的宽度,对文字内容进行自动断行
兼容性:
查看网址:http://www.quirksmode.org/oddsandends/wbr.html
相关文章推荐
- img标签下多余空白BUG解决方法
- IE6 7下解决无内容的空DIV占位置的方法
- 在进行页面的DIV CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。
- img 标签下多余空白的解决方法
- IE6 7下解决无内容的空DIV占位置的方法
- 在IE6中无法正确处理a标签伪类的原因及解决方法
- img标签下多余空白BUG解决方法
- 【转】img标签下多余空白BUG解决方法-DivCSS教程
- iis7下url重写后已存在的html不能访问了的解决方法
- IE6、IE7下a标签后面的span元素向右浮动后错位的解决方法
- HTML中FORM标签下面出现空白的解决方法
- php使用strip_tags()去除html标签仍有空白的解决方法
- 关于HTML下overflow-y:auto无效、清除HTML默认边距、解决去除手机访问网页时的左右多余空白的三个方法汇总
- 关于html中charset与<title>位置不同页面空白的问题及解决方法
- IE6下img空白位置解决方法
- img 标签下多余空白的解决方法
- [reivewboard]svn迁移位置导致“找不到文件”的原因及解决方法
- img标签下多余空白BUG解决方法 / div / img / 图片 / 空格
- IE6、IE7下a标签后面的span元素向右浮动后错位的解决方法
- IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法