Question

我有以下代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .tl, .tr, .bl, .br, .b, .t {
                background: #f00;
                width: 16px;
                height: 16px;
            }

            .m {
                background: url('https://www.google.com/images/logos/ssl_logo_lg.gif') #0f0;
            }

            table {
                width: 512px;
                height: 512px;
                border-spacing: 0px;
                border-collapse: collapse;
                table-layout: fixed;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td class="tl">&nbsp;</td>
                <td class="t">&nbsp;</td>
                <td class="tr">&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td class="m">test</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td class="bl">&nbsp;</td>
                <td class="b">&nbsp;</td>
                <td class="br">&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

只要我不用IE7查看它就可以正常工作。 IE7由于某种原因不尊重我的宽度和高度设置为16px，而是使所有行和列采用平均大小。奇怪的是，这在Quirks模式下工作，但现在在标准模式下，有什么用呢？

P.S。有没有其他方法可以实现类似的布局，其中16x16角，16px顶部和底部，而中间适合？

Answer 1

为height:100%;

提供.m

Answer 2

尝试给每个单元格一些内容：

<td class="tl">&nbsp;</td>

应该修复它。

Answer 3

IE7及以下版本不支持

border-spacing和border-collapse。尝试使用

<table cellspacing="0" cellpadding="0">

更新：

我这里没有IE7或IE6，所以这只是猜测：尝试将.m的宽度和高度设置为自动。如果这不起作用（因为那太容易了，对吗？:)），你可以手动将尺寸设置为480px（512 - 2 * 16）

Answer 4

试试这个：

    <style>
          table  {
            width: 512px;
            border-spacing: 0px;
            border-collapse: collapse;
            table-layout: fixed;
        }
        table .m 
        {
            background: url('https://www.google.com/images/logos/ssl_logo_lg.gif') #0f0;
             height: 512px; 
        }
        .tl, .tr, .bl, .br, .b, .t {
            background: #f00;
            width: 16px;
            height: 16px;

        }


    </style>

IE7中的Buggy HTML表有帮助吗？

4 个答案: