为什么在表格中更改我的TD的宽度和高度，所以表格看起来很难看？

时间：2014-05-29 10:38:26

标签： html html5 size width html-table 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv = "Content-Type" content = "text/html; charset = windows-1251">
        <title>test export</title>
    </head>

    <body>
        <table id = 'HTML_TableWithRoundedCorners0' position = 'STATIC' width = '200px' style = "height: 100px; "  cellspacing = '0' cellpadding = '0'>
            <tr>
                <td width = '7px' height = '7px'><img src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAkSURBVBhXYyAJbDhy7z8MQ4UgAFkCRRJdAi6JTQKEyZW89x8ASAFjfxv6A8oAAAAASUVORK5CYII=' /></td>
                <td style = 'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAANSURBVBhXY9hw5N5/AAfMA1I8e6yOAAAAAElFTkSuQmCC); background-repeat: repeat;'></td>
                <td width = '7px' height = '7px'><img src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAkSURBVBhXY8ALNhy59x8ZQ4UhAF0SRQE2SRDGKwnC5Ere+w8AGz13ZexwuXoAAAAASUVORK5CYII=' /></td>
            </tr>
            <tr>
                <td style = 'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAANSURBVBhXY9hw5N5/AAfMA1I8e6yOAAAAAElFTkSuQmCC); background-repeat: repeat;'></td>
                <td align = 'LEFT' valign = 'TOP' style = 'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAANSURBVBhXY9hw5N5/AAfMA1I8e6yOAAAAAElFTkSuQmCC); background-repeat: repeat;'>&nbsp;
                </td>
                <td style = 'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAANSURBVBhXY9hw5N5/AAfMA1I8e6yOAAAAAElFTkSuQmCC); background-repeat: repeat;'></td>
            </tr>
            <tr>
                <td width = '7px' height = '7px'><img src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAkSURBVBhXY9hw5N5/XJgBBLBJgDCFkiCAVxIE8EqCAELy3n8Aob16tjPJVKEAAAAASUVORK5CYII=' /></td>
                <td style = 'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAANSURBVBhXY9hw5N5/AAfMA1I8e6yOAAAAAElFTkSuQmCC); background-repeat: repeat;'></td>
                <td width = '7px' height = '7px'><img src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAdSURBVBhXY9hw5N5/XJjekgwggFMCBHBKMDAwAAB0+Y6cQEIaPgAAAABJRU5ErkJggg==' /></td>
            </tr>
        </table>
    </body>
</html>

如果没有<!DOCTYPE html>表格看起来很好，如果存在，表格看起来很难看，因为TD的大小不正确，而我甚至将其指定为7px。 我怎么解决呢？ 我在IE11中测试它

1 个答案:

答案 0 :(得分：4)

在怪癖模式（AKA兼容性与20世纪90年代的错误模式）中，行高计算被破坏，因此图像下方的空间（应该位于基线，而不是下行线）缺失。

添加Doctype可防止触发怪癖模式。

typographic lines

您可以通过在图片上设置display: block来解决此问题。

你应该首先不使用表格来处理问题;这些天来对border-radius的支持非常好。

相关问题
最新问题