IE7下td中元素使用margin负值,溢出部分被隐藏

IE7下td中元素使用margin负值,溢出部分被隐藏_第1张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
    <title>Document</title>
<!--  
    在IE7文档模式下, td里的元素 使用 margin负值时, 溢出的部分会隐藏
    在溢出元素上添加css规则 "*position:relative"可以解决
-->
<style>
    b {
        height: 20px;
        width: 20px;
        background-color: red;
        float: left;
        margin-left: -18px;
    }
    td {
        border: solid 1px green;
    }
    table {
        border-collapse: collapse;
        margin: 0 auto;
    }
    .resolveTdOverflow { *position: relative; }
</style>
</head>
<body>

    <table>
        <tr>
            <td><b>1</b>11</td><td>12</td>
        </tr>
        <tr>
            <td><b class="resolveTdOverflow">2</b>21</td><td>22</td>
        </tr>
    </table>

</body>
</html>


你可能感兴趣的:(ie7,溢出部分被隐藏,tmargin负值)