css 在 FireFox 中显示 Tr 内的 div 效果很好，但 IE 增加了行的宽度

Question

我很难弄清楚发生了什么以及如何解决它。

我有一些 div 包含一些图标，这些图标在显示表格数据时会导致宽度问题。如果我删除包含图标的 div，行宽最终会达到我想要的方式（请参阅下面的 Firefox 示例）。

这是我想要的 Firefox 中的视图（注意红色圆圈中的图标的位置，它在相同的 y 坐标上对齐，或附近）： 替代文本 http://www.redsandstech.com/ff_display.jpg

这是 IE7 中的视图（注意图标和灰线（即表格行）的宽度发生了什么变化）： 替代文本 http://www.redsandstech.com/ie_display.jpg

这是 HTML：

<table>
 <tbody>
  <tr>
    <td>
        <span>stuff 1</span>
        <span>stuff 2</span>
        <div class="prop_edit"><img class="img_height14" src="edit.jpg"></div>
        <div class="prop_archive"><img class="img_height14" src="archive.jpg"></div>
        <div class="prop_delete"><img class="img_height14" src="delete.jpg"></div>
        <div style="display:none;"> 
             <div>Links Here</div>
        </div>
     </td>
  </tr>
</tbody>

Heres CSS：

.prop_edit{
float:right;
position: relative;
top: 0px;
right:50px; 

}
.prop_archive{
    float:right;
    position: relative;
    top: 0px;
    right:10px;
}
.prop_delete{
    float:right;
    position: relative;
    top: 0px;
    right: -30px;
}
.img_height14{
    height:14px;
    vertical-align:top;
    position:relative;
}

我已经尝试了很多不同的 CSS 东西，但实际上我只是想弄清楚一些事情。有人有一些可以帮助我的提示吗？

提前致谢。

Answer 1

为什么需要划分？只需将图像本身浮动到右侧即可。就像我告诉其他一百万人的那样，你不能在表中使用除法而不产生一些你无法修复的不利影响，它们不应该存在在那里。

我的猜测是 right: -30px 被解释为在右侧添加 30px 以为其腾出空间。不过，将图像向右浮动将是一个更好的解决方案，并且您可以在它们周围添加边距以正确间隔它们。

另外，您应该首先将任何内容浮动到右侧，而不是在内容之后。如果内容位于内容之后，大多数浏览器通常会将浮动到右侧的内容放在新行中，这是正确的行为。这是因为默认情况下，一个分区会自己开始一个新行，然后它会被修改为向右浮动，通常在它已经创建的同一新行上。

是的，有一些不同的事情导致了问题。不过，并不是所有问题都是由一件事造成的。