Question

这是代码：

它在Firefox和Opera中运行良好，但它不在IE中：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style>
                body {
                    border: 1px solid gray;
                    line-height: 120%;
                    margin: 5px;
                    width:100%;
                }

                h1#header,h5#footer {
                    background-color: gray;
                    clear: both;
                    color: white;
                    padding: 0.5em;
                    margin: 0;
                }

                div#menu {
                    width: 190px;
                    float: left;
                }

                div#body {
                    margin-left: 200px;
                    padding: 2px;
                    border-left: 2px gray solid;
                }

                table {
                    border: 1px solid #CEDCED;
                    border-collapse: collapse;
                    margin: 2px auto;
                    width: 100%;
                }

                th {
                    border: 2px ridge maroon;
                    background-color: maroon;
                    color: white;
                    padding: 2px;
                }

                tr {
                    background-color: white;
                    margin: 1px;
                }
        </style>
        <script type="text/javascript">
                function setTableWidth(){
                    alert(document.getElementById('tab').offsetWidth);
                }
        </script>
    </head>

    <body onload=setTableWidth()>

        <h1 id="header">Header</h1>

        <div id="menu">
            <ul>
                    <li>link1</li>
                    <li>link2</li>
                    <li>link3</li>
                    <li>link4</li>
                    <li>link5</li>
            </ul>
        </div>

        <div id="body">
            <table id="tab">
                <tr>
                    <th>name</th>
                    <th>age</th>
                    <th>email</th>
                </tr>

                <tr>
                    <td>test</td>
                    <td>100</td>
                    <td>xx</td>
                </tr>
            </table>
        </div>

        <!-- foot -->
        <h5 id="footer">Copyright xxx</h5>
    </body>
</html>

我添加了一个js来查看表的宽度，如果你在浏览器中测试它，你将获得大小，以下是我的：

Firefox：1062

IE：1521

所以，我想知道为什么？

在我看来，Firefox的结果是正常的，为什么表占用的内容超过其父级的宽度（示例中的div＃body）？

Answer 1

我相信它在IE中确实可以正常工作。

你的桌子将获得作为身体的容器的宽度。然后它会被你的菜单“推”到右边，因为你把它移到了190px的左边。这将使您的总宽度为100％+ 190px。

我会将你的div＃body上的边距放下，然后将它漂浮到左侧。你也应该坚持使用固定值或百分比。例如，将左列设置为10％，将右列设置为90％，并将它们都浮动到左侧。

Answer 2

http://jsfiddle.net/cj6fB/

看看这个，看看你是否能够稍微改变你的布局以适应这个。

您遇到表问题的原因是因为表的浏览器规范。它们有很大的不同，并且没有任何承诺的方法可以让表填充100％而不会像那样敲它。我玩了一下，桌子总是填满100％，把它推到菜单下面而不是旁边。

我希望我能帮助你一点，即使我不能给你你想听到的答案。

样式“width = 100％”的表在IE和Firefox中导致不同的结果

2 个答案: