Flex 框不适用于 doctype HTML 4.0 Transitional答案

【问题标题】：Flex box won't work with doctype HTML 4.0 TransitionalFlex 框不适用于 doctype HTML 4.0 Transitional
【发布时间】：2017-05-01 11:24:02
【问题描述】：

我无法在 IE 11 上正确呈现灵活的框，但是当我替换时：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

由

<!DOCTYPE html>

这很好。

谁能告诉我为什么？这是一段代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <style> 
            td {
            background: #eee;
            border: 1px solid;
            }

            .flex-container {
            display: flex;
            flex-direction:column;
            width: 400px;
            height: 250px;
            }

            .flex-item {
            display:block;
            }

            </style>
    </head>
    <body>
        <table>
            <tr>
                <td>normal cell</td>
                <td>normal cell</td>
            </tr>
            <!-- my flexibal container-->
            <tr class="flex-container">
                <td class="flex-item">flex item 1</td>
                <td class="flex-item">flex item 2</td>
            </tr>
        </table>
    </body>
</html>

【问题讨论】：

标签： html css flexbox doctype

【解决方案1】：

HTML 4.0 doctype 将始终触发 quirks 模式。如果您必须使用旧版文档类型，例如因为你需要依赖几乎标准的模式，所以使用 HTML 4.01 的 doctype，而不是 HTML 4.0 的：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

否则，说真的，请坚持使用新的文档类型。

【讨论】：