Question

我们有一个类似于以下内容的页面：

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type"
          content="text/html;charset=ISO-8859-1" />
        <title>Welcome to Application</title>
        <style type="text/css">
html, body, div, table, tr, th, td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

html {
    font-size: 100%;
}

body {
    background: #fff;
    color: #036;
    font-family: Verdana, sans-serif;
    font-size: 11px;
    line-height: 18px;
}

* html body {
    text-align: center;
}

.container {
    display: block;
    margin: 18px auto 0;
    width: 750px;
}

* html .container {
    height: 1%;
    text-align: left;
}

.container:after {
    clear: both;
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.section {
    border-color: #e5e5e5 #dbdbdb #d2d2d2;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 18px;
    padding: 17px 39px;
}

table, th, td {
    vertical-align: middle;
}

th, td {
    border-right: 1px solid #fff;
    font-weight: 400;
    padding: 9px;
    text-align: left;
}

table {
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 1.4em;
    width: 100%;
}

th {
    background: #c3d9ff;
    border-bottom:1px solid #ddd;
    font-size: smaller;
    font-weight: 700;
}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="section">
                <table cellspacing="0">
                    <tr>
                        <th>Header</th>
                        <th>Header</th>
                        <th>Header</th>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>1</td>
                        <td>a</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>2</td>
                        <td>b</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>3</td>
                        <td>c</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>4</td>
                        <td>d</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>5</td>
                        <td>e</td>
                    </tr>
                    <tr>
                        <td>Content</td>
                        <td>6</td>
                        <td>f</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>

{* 1}}在Windows XP上的Chrome和Firefox 3.6中正确显示，但是，在IE6中查看时，div强制table比指定的750像素更宽。

现在，通过将表格的宽度明确设置为670像素

，可以部分解决此问题

我们仍然更喜欢一种不需要明确定义表格宽度的分辨率

Answer 1

我的计算机上没有IE6，虽然我在http://ipinfo.info/netrenderer/尝试了模拟器，但有一件事似乎有用（没有在.container或{{1}上明确设置670px宽度}）是添加以下内容：

table

我猜这告诉IE6 * html .section{ width: 100%; } table的设置应该基于width: 100%;的计算宽度（受其填充和边框影响）而不是.section的宽度为750像素。

表是在IE中强制div的宽度

1 个答案: