html – 最大宽度不适用于IE7的表格

前端之家收集整理的这篇文章主要介绍了html – 最大宽度不适用于IE7的表格前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
那么为什么“max-width”不适用于Internet Explorer 7中的表?最大宽度在其他元素上可用,并且似乎工作正常,但是当应用于表时,我不能使它做任何事情,即简单地忽略最大宽度规则.这是代码
<!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中,它已经应用了“无包装”规则.每个单元格都伸展到需要的位置,而不是试图破坏单元格的文本,整个表格只是伸出来忽略最大宽度规则.

怎么了这个废话?如何在IE7中将Max-Width放在表格中? (在FF& IE8中工作正常)

我试过的是什么不起作用:

table {display:block; }

td {自动换行:break-word; }

table {table-layout:fixed; }

解决方法

WebKit浏览器会忽略为表设置的max-width属性,Chrome和Safari都会像IE7一样使表忽略最大宽度.我建议将max-width属性设置为包装元素,例如div.

http://jsfiddle.net/P5YPR/1/

原文链接:/html/224943.html

猜你在找的HTML相关文章