IE7在浮动元素之间创建空文本注释

时间:2011-11-23 14:13:27

标签: css internet-explorer-7 whitespace textnode

我正在处理一个分页的事情,它只是div中的一堆浮动锚标签。现在,在IE7中,它在这里和那里插入空文本节点,看似随意,这打破了布局。

结果: Example of how it looks on different pages. Note the empty text nodes.

它在不同页面上的显示方式示例。请注意空文本节点。干净,是吗?

CSS:

 .nwsPaging {
   width:200px; /* Have also tried fluid size */
   height:30px;
   display:block; }

.nwsPaging a {    
   width:auto; /* Have also tried fixed size */
   margin:0 0 0 1px;
   padding:2px 8px;
   border:solid 1px #ccc;
   background:#eee;
   float:left;    
   line-height:20px;        
   display:block;
   zoom:1;
   vertical-align:top; /* Should not do any difference */ }

.nwsPaging a:hover, .nwsPaging .isActive {  
    background:#D150A1;
    color:#fff;
    display:block; /* Should be redundant, but just in case */
    zoom:1; }

正如你所看到的,我尝试了一些不同的东西,包括为容器和浮动的-tags设置一个固定的宽度,另外还给它hasLayout。 .isActive类没有任何特殊之处,如果我从不添加类,它就没有区别。

我在不同的系统中遇到了完全相同的问题,但是我不记得我是如何修复它的。我无法访问代码,检查员也没有帮助。

奖金信息: 该网站基于HTML5Boilerplate构建,使用normalize reset CSS

修改 标记非常简单,虽然标签是动态创建的,但应该没有可能创建空文本节点的换行符。

如何将标记呈现为已解析:

<div class="nwsPaging clearfix">
   <a href="foo">Previous</a>
   <a href="bar">1</a>
   <a href="bar" class="isActive">2</a>
   <a href="bar">3</a>
   <a href="baz">Next</a>
</div>

1 个答案:

答案 0 :(得分:0)

这实际上可能是由代码中的换行符引起的。

剥去它们,看它是否仍然如此。