Question

我可以使用IE7专家提出的渲染问题;我的布局在除IE7之外的所有浏览器上都能很好地运行，而且我无法找到让它运行起来的神奇风格。

JSFiddle问题的例子在这里：http://jsfiddle.net/rB29C/2/

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

我认为它与浮动元素的宽度有关，但我无法弄清楚魔法风格组合来解决这个问题。我的应用程序中有条件样式表，因此我可以使用IE7特定样式，但如果可能的话，我更愿意避免基于标记的更改。

我也很想知道发生了什么 - 所以我希望将来可以学会避免这种情况：）

Answer 1

我已经弄明白了，解决方案不是在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 2

当单元格的宽度太小时，IE7似乎将单元格中的项目推到底部。我将td.type的宽度增加到了14％并且它似乎在小提琴中起作用，但是如果你的桌子需要缩小和增长，这可能不是最好的解决方案（如果桌子被压扁，酒杯将再次下降到底部）。否则，您可以考虑使用设置像素宽度而不是％

Answer 3

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

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

总结一下，我从原来的小提琴中设置了以下附加样式，IE现在似乎正确布局和调整大小（包括包含td）：

input.checkbox {
    display: inline;
    float: left;
}

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

希望这对那些正在努力解决IE7奇怪问题的人有所帮助！

表列中的IE7浮点布局问题

3 个答案: