注释在IE下造成文字溢出
很多人都会有在制作网页的时候写注释的习惯。应该说是个好习惯，不仅使自己的思路清晰，极大地减轻了维护的难度，也为其他人的阅读提供了方便。但就是这样的好习惯，有时也会为我们带来一想不到的麻烦，如典型的3px问题。
各浏览器都无一例外的在遇到注释文字时都会忽略，但在IE下还是给我们增添了不小的麻烦。当子对象设置了浮动属性，且宽度等于父对象的宽度，此时在IE下就会出现问题。
请看下面的代码：
1、问题：以#Sub为父对象来说，其下有宽度和它相同的N个子对象，并且都设置了浮动属性。为了区别各子对象，为每个子对象后面都加了注释。这时候我们看到最后一行的文字有溢出的现象。
2、解决方法：
（1）把注释去掉。即把XHTML中的“<!-- sub -->”全部删除。这也是最直接最有效的方法。但需要设计师在页面和程序结合时逻辑必须清楚，否则会非常麻烦。
（2）取消子对象的浮动属性。即把CSS中“.sub”中的“float:left;”去掉。
但这样有时会在FireFox下引发新的问题。比如当子对象下面又包含了浮动对象时，在FireFox中就会出现子对象无法自适应高度的问题。请参阅无浮动的对象在FireFox无法自适应高度
（3）设置子对象的宽小于父对象宽至少5px。即父对象的宽是240px，设置“.sub”的“width:235px”。
其实，就本例而言，子对象小于父对象3px就可以，但当子对象的数量增多时同样会出现溢出的问题。如果用这种方法，本人推荐最小要小于5px，这样就不会出现溢出的问题了。
（4）IE Hack。利用这样的注释也可以避免：“<!--[if !IE]>注释<![endif]-->”。
同理，运用CSS Hack也可以即避免bug，又兼容各种浏览器，但比较复杂，为什么有简单的不用呢？
（5）我在网上还看到了有人用“position:relative”或“position:absolute”来解决问题，本人“不推荐”用这种方法，因为它会产生一想不到的后果。假如浮动对象都有一个共同的父对象时，虽然溢出的文字不见了，但是它还会占位。
把“position:relative;”替换成“position:absolute;”，会造成相互覆盖。
3、总结：
（1）由第一个例子可以看出，在IE下，当注释在两个或两个以上同级浮动对象之间时才会出现溢出的bug。注释在两个或两个以上浮动对象之前或之后都不会出现溢出的bug。如：
<div id="sub">
<!-- 注释 --> <div class="sub">把每行后面都加注释，加注释后，最后一行文字有溢出，溢出字数 = 注释数 * 2 - 1</div>
<div class="sub" id="sub1">这里是第二行的内容</div>
<div class="sub" id="sub2">这里是第三行的内容</div> <!-- 注释 -->
</div>
这样是不会出现溢出错误的，因为三个子对象之间没有注释。虽然父对象有浮动，但因为不是同级对象，所以不会出错。
（2）如果相邻的多个同级浮动对象之间都有注释，则错误作用在最后一个浮动对象上，溢出文字数 = 浮动对象之间的注释数 * 2 - 1。
（3）建议大家在同级的相邻浮动对象之间尽量不要加注释。
其实，选择什么样的方法在于个人，但我的一贯原则就是“用最简单的办法解决最复杂的问题”。我们没有必要把复杂的问题搞的更复杂，简单有效才是最好的，即减轻了浏览器的压力，也方便了别人，方便了自己。如果您有什么更好的方法，或有什么不同的看法，欢迎与我交流。
- IE双倍边距BUG的现象及解决办法（Traffic：681 | Posted By：郁闷）
- IE6下图片下边有空隙的解决办法（Traffic：612 | Posted By：郁闷）
- 让IE6和IE7在WindowsXP下共存（Traffic：568 | Posted By：近水社区）
Comments(3)
关于IE6的溢出问题，网上还有display:none这种情况，试了很多办法，最后很简单的缩小了一下宽度就OK了，所以很赞同第3种办法，可以不影响布局的情况解决BUG
话题搜索
文章推荐