Question

为什么“max-width”对Internet Explorer 7中的表不起作用？ max-width可用于其他元素，似乎工作正常，但是当应用于表格时，我无法做任何事情，即max-width规则被忽略。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Foo</title>
</head>
<body>
    <div style="background-color: Red; max-width: 1000px;">
        <table style="background-color: Green; max-width: 500px;">

                <tr>
                    <td><a href="#" class="action view">View</a></td>
                    <td>7/20/2011</td>
                    <td>James Smith</td>
                    <td>345 NW 23rd Ave Gainesville, FL 32606</td>
                    <td>Alachua Blah blah sf jfh jsdhjs fjsh djkf sdjkhk</td>
                    <td>345621</td>
                    <td>Fred Smith</td>
                </tr>
        </table>
    </div>
</body>
</html>

在Firefox中，表格被正确约束为500px，并且单元格内的文本以适当的方式中断（在单词之间，就像您期望的那样）。然而，在IE7中，它就像应用了“无包装”规则。每个单元格都伸展到需要的位置，而不是试图破坏带有单元格的文本，整个表格只是伸出来忽略max-width规则。

如何将max-width放在IE7的表格中？（它在Firefox和IE8中运行良好）

我尝试过的不起作用：

table { display: block; }

td { word-wrap: break-word; }

table { table-layout: fixed; }

Answer 1

WebKit浏览器会忽略为表设置的max-width属性，Chrome和Safari都会使表格忽略最大宽度，IE7也是如此。我建议将max-width属性设置为包装元素，例如div。

请参阅http://jsfiddle.net/P5YPR/1/

Answer 2

试试这个：

table#my_table {
    max-width:500px;
    width:expression(document.body.clientWidth > 500? "500px": "auto" );
}

不幸的是，由于?，这将无法验证。好消息是，因为它是一个仅限IE的解决方案，您可以在创建<body>标记并设置特定于IE的类时简单地执行条件元素：

<!--[if IE 9]><body class="ie9 ie"><![endif]--> 
<!--[if IE 8]><body class="ie8 ie"><![endif]--> 
<!--[if IE 7]><body class="ie7 ie"><![endif]--> 
<!--[if lte IE 6]><body class="ie6 ie"><![endif]--> 
<![if !IE]><body><![endif]>

现在在你的CSS中：

table#my_table {
    width:500px;
    max-width:500px;
}

.ie7 table#my_table {
    width:expression(document.body.clientWidth > 500? "500px": "auto" );
}

为什么IE7中的max-width不能用于？<table> </table>

2 个答案: