HTML td 不会与<一起换行!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

HTML td will not break to new line with <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

提问人:Tim Ramsey 提问时间:3/7/2015 最后编辑:Brian Tompsett - 汤莱恩Tim Ramsey 更新时间:12/21/2016 访问量:341

问:

我在让表格单元格按预期响应样式时遇到了问题。请不要推荐使用 div 和 CSS。我知道它更好,但不适合这个特定问题。我也无法更改文档类型,因为它是闭源的 CMS。这与 XHTML 文档类型的预期一样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
.foottable{
    width:100%;
    table-layout:fixed;
}
.foottable td{
    display: block;
    width: 100%;
}
</style>
</head>
<body>                  
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="foottable">
    <tbody>
        <tr valign="top">
            <td>
                <b>About</b>
                <a href="info.html">About</a>
                <a href="press.html">Press</a>
                <a href="http://blog.com/">Blog</a>
                <a href="events.html">Events</a>
                <a href="stores.html">Store Locations</a>
                <a href="ind.html">Site Map</a>
            </td>
            <td>
                <b>Customer Service</b>
                <a href="shipping.html">Shipping</a>
                <a href="returnpolicy.html">Returns</a>
                <a href="giftcert.html">Gift Certificates</a>
                <a href="privacypolicy.html">Privacy Policy</a>
                <a href="terms.html">Terms &amp; Conditions</a>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

一旦 doctype 是 HTML 4.01,它就无法按预期工作

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
.foottable{
    width:100%;
    table-layout:fixed;
}
.foottable td{
    display: block;
    width: 100%;
}
</style>
</head>
<body>                  
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="foottable">
    <tbody>
        <tr valign="top">
            <td>
                <b>About</b>
                <a href="info.html">About</a>
                <a href="press.html">Press</a>
                <a href="http://blog.com/">Blog</a>
                <a href="events.html">Events</a>
                <a href="stores.html">Store Locations</a>
                <a href="ind.html">Site Map</a>
            </td>
            <td>
                <b>Customer Service</b>
                <a href="shipping.html">Shipping</a>
                <a href="returnpolicy.html">Returns</a>
                <a href="giftcert.html">Gift Certificates</a>
                <a href="privacypolicy.html">Privacy Policy</a>
                <a href="terms.html">Terms &amp; Conditions</a>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

这是我期望看到的:enter image description here

这是我所看到的:enter image description here

有人知道为什么 doctype 不在自己的行上设置 td 吗?我正在使用 Chrome。我检查了firefox,它按预期工作。

xhtml HTML 表格 文档类型

评论

0赞 Mr Lister 3/10/2015
好吧,您使用的 HTML 文档类型无效,因此这将触发怪癖模式。如果您不能使用正确的文档类型,并且无法更改内容以使用 divs,我不确定该提出什么建议。
0赞 Mr Lister 3/10/2015
哦,如果你想知道为什么Firefox的行为是正确的,那并不是什么大谜团。只是不同的浏览器有不同的怪癖。这正是您应该尽可能避免怪癖模式的原因。
0赞 Mr Lister 3/10/2015
比如说,在重新阅读这个问题时,你是说CMS有可能发出XHTML文档类型吗?
0赞 Tim Ramsey 3/10/2015
@MrLister感谢您的评论。是的,doctype 是在 CMS 的闭源中编码的。我确实找到了启用松散定义“w3.org/TR/html4/loose.dtd”的能力,从而解决了这个问题。

答:

0赞 Paul Sweatte #1

如上所述:

我确实找到了启用松散定义“w3.org/TR/html4/loose.dtd”的能力;这解决了问题。

引用