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

Question

我在弄清楚发生了什么以及如何解决它时遇到了一些困难。

我有一些包含一些图标的 div，这些图标在显示表格数据时会导致宽度问题。如果我删除包含图标的 div，行宽将按照我想要的方式结束(参见下面的 firefox 示例)。

这是我想要的 Firefox 中的 View (注意用红色圈出的图标的位置，它们在相同的 y 坐标或附近对齐): alt text http://www.redsandstech.com/ff_display.jpg

这是 IE7 中的 View (注意图标和灰色线(即表格行)的宽度发生了什么变化): alt text 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>

这是 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

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

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

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

是的，有一些不同的因素导致了问题。不过，这并不是导致所有问题的一件事。