表列中的IE7浮动布局问题

Question

我可以从IE7专家那里获得一些渲染问题的帮助；我的布局在除了IE7之外的所有浏览器上都能很好地工作，我不太明白让它工作的神奇风格。

JSFiddle的问题示例如下：http://jsfiddle.net/rB29C/2/

如果您在IE7中查看它，链接（酒杯图像）会向下推到复选框下方的第二行。我的目标是让他们站在同一条线上。如果你在IE8+或任何其他浏览器中查看fiddle，它会按预期工作。

我认为这与浮动元素的宽度有关，但我无法找到神奇的风格组合来解决这个问题。我的应用程序中确实有条件样式表，所以我可以使用IE7特定的样式，但如果可能的话，我更喜欢避免基于标记的更改。

我也很想了解发生了什么——所以我希望将来能学会避免这种情况：）

Answer 1

IE7似乎会在单元格宽度太小时将单元格中的项目推到底部。我把td.type的宽度增加到14%，它似乎很有效，但如果你的桌子需要收缩和增长，这可能不是最好的解决方案（如果桌子被压扁，酒杯会再次掉到底部）。否则，您可以考虑使用设置的像素宽度，而不是%

Answer 2

我已经弄清楚了，解决方案不在CSS中，而是在HTML中。只需在不同的细胞之间移动酒杯图片，如下所示：

<table>
<tbody>
    <tr>
        <td class="type">
            <input class="checkbox" type='checkbox' />
        </td> 
            <a class="link" href="#"></a>
        <td class="name">Name
        </td>
        <td class="dates">Dates
        </td>
        <td class="score">Score
        </td>
    </tr>
</tbody>
</table>

问题是它只在IE7环境中工作，而在其他环境中不工作。也许你可以用php来调节它，这取决于页面所在的浏览器。

<?php
$isIE7 = (get_broswer('broswer') == 'IE' && get_browser('version') < 8 )
?>
<table>
<tbody>
    <tr>
        <td class="type">
            <input class="checkbox" type='checkbox' />
        <?php if ($isIE7) echo('</td> 
            <a class="link" href="#"></a>');
           else echo('
            <a class="link" href="#"></a>
        </td> ');?>
        <td class="name">Name
        </td>
        <td class="dates">Dates
        </td>
        <td class="score">Score
        </td>
    </tr>
</tbody>
</table>

我不确定你是否想避免php，但如果你这样做了，我也可以为你制作一个JavaScript版本。

Answer 3

我能够找到问题的解决方案；我用新样式更新了JSFiddle：

http://jsfiddle.net/rB29C/13/

总之，我从最初的fiddle中设置了以下额外的样式，IE现在似乎可以正确地布局和调整东西的大小（包括包含的td）：

input.checkbox {
    display: inline;
    float: left;
}
a.link {
    display: inline;
    float: left;
    clear: right;
    margin: 0;
}

希望这对其他正在与IE7的古怪之处作斗争的人有所帮助！