网页前端设计

http://www.86y.org

搜索文章

ie6BUG注释惹的祸

用声音读出全文关注我吧
 2012/11/30 9:47:08 阅读次数:7003

ie6BUG注释惹的祸

前几天碰到了IE6BUG注释会多出整个DIV。后来求救朋友,她说可能是宽度问题,我就去试着减少。我说还不行。然后她又告诉我是注释的原因,果然,我把注释去掉了就正常了。可是不加注释对程序员增加了理解的难度,所以想办法加进去。后来发现。注释不能写在两个浮动容器的中间,可以写在浮动的容器的里面。

下面是我转来的希望对大家的理解有帮助。

IE6中,一行文本被自动地复制一部分,并显示在其下边。

出现这个问题的条件:

通常,一个容器包含2两个具有“float”样式的子容器。 第二个容器的宽度大于父容器的宽度,或者父容器宽度减去第二个容器宽度的值小于3。 在第二个容器前存在注释(这也是为什么此bug也叫做“IE6注释bug”的原因)。

说明:注释造成文字溢出是IE的BUG,注释造成文字溢出与其位置有关,注释造成文字溢出与文字区块的固定宽度有关,溢出文字的字数=注释的条数*2-1,这里的字数在中文或英文数字时都成立。

这是注释bug,经典的iebug。

  说明:注释造成文字溢出是IE的BUG,注释造成文字溢出与其位置有关,注释造成文字溢出与文字区块的固定宽度有关,溢出文字的字数=注释的条数*2-1,这里的字数在中文或英文数字时都成立。

  当溢出的文字字数大于文本的字数时,文字区块将会消失。

  解决方法:

  1、不放置注释。最简单、最快捷的解决方法,嘿嘿……

   另一解决方法是:
   将注释
   <!--头部文件-->
   改写成
   <!--[if !IE]>头部文件<![endif]-->
   这样的形式。

  2、注释不要放置于2个浮动的区块之间。

  3、将文字区块包含在新的<div></div>之间,如:<divstyle="float:right; width:400px"><div>↓这就是多出来的那只猪</div></div>。

  4、去除文字区块的固定宽度,与3有相似之处。

  另外一种解决方法:

  在浮动之后的最后一个DIV后面再多一个DIV,什么属性都不需要加,只要一句clear:both;也可.在需要兼容多种浏览器的情况下,可加上属性font-size:0; height:0; overflow:hidden;如:
  <div style="clear:both; font-size:0; height:0; overflow:hidden"></div>

摘自(剑锋博客):http://ljf.cn/archives/247.aspx


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭