0

我可以使用 IE7 专家的一些帮助来解决渲染问题；我的布局在除 IE7 之外的所有浏览器上都运行良好，我无法完全弄清楚让它工作的神奇风格。

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

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

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

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

4

3 回答 3

0

我能够为我的问题找到解决方案；我已经用新样式更新了 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 的古怪问题苦苦挣扎的人有所帮助！

于 2012-07-12T19:26:47.083 回答
0

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

于 2012-07-11T20:56:40.267 回答
0

我已经弄清楚了，解决方案不在 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 版本。

于 2012-07-11T20:18:58.050 回答