Buggy HTML tables in IE7, help?_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-23 14:58 出处：网络

I have the following code: <!DOCTYPE html> <html> <head> <style> .tl, .tr, .bl, .br, .b, .t {

I have the following code:

<!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>

It works fine as long as I don't look at it with IE7. IE7 for some reason does not respect my width and height set to 16px and instead makes all rows and columns to take the average size. Oddly, this works in the Quirks mode though, but now in the standards mode, what's up?

P.S. Is there any other way of accomplishing a similar layout that has 16x16 corners, 16px top and bottom while the middle fits in?

give height:100%; for .m

Try giving each cell some content:

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

that should fix it.

border-spacing and border-collapse are not supported in IE7 and below. Try using

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

Update:

I don't have IE7 nor IE6 here, so this is just a guess: try setting the width and height of .m to auto. If that doesn't work (since that would be too easy, right? :)), you can set the dimensions manually to 480px (512 - 2 * 16)

Try this:

    <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>