IE6、7下html标签间存在空白符,导致渲染后占用多余空白位置的原因及解决方法

直接上图:


原因:该div包含的内容是靠后台进行print操作,输出的。如果没有输出任何内容,浏览器会默认给该空白区域添加空白符。
在IE6、7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字体的属性,所以也就出现“多余占位”的bug。

解决方法:

一、让html标签相接输出。例如:<div></div>。  ——太过麻烦,代码也不规则,不好维护。

二、设置font-size:0;  ——不能完美fix~

二、使用注释符<!-- -->。例如:<div><!--       --></div>,让div中间不存在空白符。  ——这种虽然能够fix问题,但是不够好

三、使用<wbr>标签。例如:<div> <wbr><div>。  ——这样,就可以让浏览器不自动给标签内容添加空白符,又不会出现多余的信息显示在页面上,完美解决~

补充知识:

wbr标签:作用是软断行,浏览器会根据容器的宽度,对文字内容进行自动断行

兼容性:

查看网址:http://www.quirksmode.org/oddsandends/wbr.html

时间: 2024-10-09 05:42:37

IE6、7下html标签间存在空白符,导致渲染后占用多余空白位置的原因及解决方法的相关文章

ie6,ie7下a标签无法点击(转载)

前几天在做一个网站的引导页面,因为都是用图片,所以按钮需要用空a标签来做,发现a标签在IE6与IE7中点击无效中点击不了,其他浏览器都正常.一开始以为是z-index的问题,但不论z-index设置多大依然还是无效.代码大致如下: <a style="position:absolute; top:0; left:0; display:block; width:100px; height:50px;" href="#"></a> 给a标签添加文

Eclipse下导出java程序可执行的jar包图片无法显示问题的一种解决方法

说明:在eclipse中运行java程序的时候一切正常,可是当把jar包导出的时候却发现图片没法显示,这估计是java程序的各种配置和路径问题所导致,后来找到一种解决方法,供遇到这方面问题的学习java程序的鞋同参考: Java项目下的目录结构如下: 其中class类放在包:package accpedu; (即实际是在如上bin/accpedu文件夹下面) 通过下面的方法来引用图片时,在eclipse里面执行是可以正常显示图片的: ImageIcon image1 = new ImageIco

cmd下运行java文件时,找不到或无法加载主类的解决方法

最近再看java,却被一个看似很基础的hellorworld头疼了十几分钟,百度了一下,若你在cmd下编辑及运行.java文件时报错,解决方案如下,如图所示: d盘根目录下的.java文件. 打开cmd,进入d盘根目录进行javac demo.java,如图所示: 这一步是不会报错的,因为只要你的classpath设置成功,不会存在报错问题, 此时我们看到刚刚编译的demo.class已经出现在根目录下. 继续下一步时,我们会发现cmd报错,如图所示: 相信很多刚入门的同学们都遇到了这个问题,百

关于网站开发中div标签中设置宽度后其中文本溢出的原因和解决方法

一.问题产生的原因 当我们为div标签声明了宽度,但是仍然会出现文本越界的情况,不知道大家有没有发现,只有文本内容为单词或者纯数字 的时候才会出现这种情况为此我特意测试了两种情况,结果如下: ①当文本内容为纯数字或者字母: ②当文本内容为汉字: 所以我们可以得出结论:浏览器在解析我们页面的时候,给这一串数字当成一个词了,这样就不会自动切断字符串而进行换行. 二.解决方法 ①word-wrap:break-word (例如div宽200px,它的内容就会到200px自动换行) ②word-brea

ubuntu 下git commit error insufficient permission for adding an object to repository database .git/objects错误 解决方法

根据提示便知是权限问题, 用下面的命令查询objects下有root权限的文件ll .git/objects/ | grep root drwxr-xr-x 2 root   root   4096 3月   1 21:40 3d drwxr-xr-x 2 root   root   4096 3月   1 21:40 5c 有些文件确实存在root权限 切换到root用户,将对应的几个目录改回对应的所有者和用户组即可: 切换到root权限, su 第一次可能会提示验证失败 此时可以添加密码 s

linux下vi或vim编辑文件时提示Found a swap file by the name的原因及解决方法

在linux下用vi或vim打开test.java文件时 [[email protected] test]# vi test.java 出现了如下信息: E325: ATTENTION     Found a swap file by the name ".test.java.swp"             owned by: root   dated: Wed Dec  7 13:52:56 2011         file name: /var/tmp/Test.java  

Windouws7 下提示您使用非管理权限登录,无法创建和修改系统DSN的解决方法

在使用LoadRunner的数据库参数化方法的时候一小部分童鞋经常会碰到"您使用非管理权限登录,无法创建和修改系统DSN"这样的提示.包括在小强性能测试培训班中也出现过.下面就说下解决方案,这个方案一般情况下都可以解决,如果还是解决不了就选择用户数据源进行创建. 开始----运行,输入:Control Userpasswords2 在弹出的"用户帐户"对话窗中 输入管理员密码  才可以修改 选择受限用户 的属性 选择 组成员 1.小强性能测试班,2016年11月6号

linux下vi或vim操作Found a swap file by the name的原因及解决方法

在linux下用vi或vim打开Test.java文件时 [[email protected] tmp]# vi Test.java 出现了如下信息: E325: ATTENTION     Found a swap file by the name ".Test.java.swp"             owned by: root   dated: Wed Dec  7 13:52:56 2011         file name: /var/tmp/Test.java    

在linux(CentOS)下无法挂载glusterfs原因及解决方法

执行的mount命令: mount target_host:/volume_name current_path 执行mount命令后,提示错误信息 /usr/sbin/start-statd: line 8: systemctl: command not found        mount.nfs: rpc.statd is not running but is required for remote locking.        mount.nfs: Either use '-o nolo