html - CSS 边距计算正确但显示错误。调整窗口大小可以纠正它

Question

我有两个表并排 float 在父 div 中。最左边的表格有 10% 的 margin-right。正如您在图像中看到的那样，边距计算正确(在本例中，父级为 850px，指标检查器显示 85px 边距)但绘制时不正确(小得多。)

调整窗口大小使其立即重绘可修复此问题。这是怎么回事!？

HTML:

<table id="subscriptions" class="data">
    <tr>
        <th colspan="2">Subscriptions
        <span id="remaining">Remaining</span></th>
        <th></th>
    </tr>
    <tr>
        <td>Spin Classes</td>
        <td class="right">3</td>
        <td class="right"><a href="REDEEM">Redeem</a></td>
    </tr>
    <tr>
        <td>Spin Classes</td>
        <td class="right">3</td>
        <td class="right"><a href="REDEEM">Redeem</a></td>
    </tr>
</table>

<table id="redeemed" class="data">
    <tr>
        <th>Redeemed Items</th>
        <th class="right">Redeemed</th>
    </tr>
    <tr>
        <td>Spin Class</td>
        <td class="right">3/3/13</td>
    </tr>
    <tr>
        <td>Spin Class</td>
        <td class="right">3/3/13</td>
    </tr>
</table>

CSS:

#subscriptions, #redeemed {
width: 45%;
float: left;
clear: both;
margin: 25px 10% 0 0;
}

#redeemed {
    clear: none;
    margin-right: 0;
}

Answer 1

我想如果你去掉 css 中的两行 clear 可能会修复它？