如何使标准模式和怪癖模式一样工作？答案

【问题标题】：How do I make Standards mode work as well as quirks mode?如何使标准模式和怪癖模式一样工作？
【发布时间】：2009-01-06 10:51:14
【问题描述】：

以下 Html 在 FireFox 或 IE7/8 中非常适合我（带有或不带有样式标签）

<!-- Deliberately no DocType to induce Quirks Mode -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        Input.quirks
        {
            margin: 1px 0px 1px 0px;
            border: solid black 1px;
        }
    </style>
</head>
<body>
Should work in Quirks Mode <br />
    <input class="quirks" type="text" style="width: 300px;" /><br />
    <input class="quirks" type="text" style="width: 147px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" maxlength="25" style="width: 150px;" /><br />
    <input class="quirks" type="text" style="width: 94px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" style="width: 100px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" value="DA8 1DE" style="width: 100px;" />
</body>
</html>

但是我被告知，在上述 HTML 顶部缺少 DocType 导致两个浏览器都在“Quirks”模式下工作。

我听说这很糟糕。

我尝试了几种 DocType，但没有找到在两种浏览器中都能正确呈现的 DocType/HTML 组合。

“Quirks”模式以外的任何模式都会导致浏览器对设置文本框宽度的尝试做出不同的反应。这似乎导致我可以更正我对 FF 或 IE 的指令，而突然另一个会失败。

一些细节...

1.> 此处的目标是，在每个浏览器中呈现时，3 行的宽度应该完全相同。不同浏览器的渲染宽度不一定相同，只是它们在每个浏览器中正确对齐/对齐。

2.> 引用的图像是 3 像素宽和 1 像素高的间隔图像（也可以作为替代方案）

3.> 如果可能的话，我不想介绍表格。

似乎 Quirks 模式是唯一在浏览器中保持一致的模式。但我担心 IE8 的最终版本或确实在未来的某些浏览器中，怪癖模式不会成为默认模式。

我该怎么办？如何指定一个 DocType（并且可能改变我的 html），这将在浏览器中创建一致的外观？

【问题讨论】：

标签： html firefox internet-explorer-8 internet-explorer-7 doctype

【解决方案1】：

“Quirks”和“Standards Compliance”模式之间的主要区别在于不同的“盒子模型”，这导致根据宽度/高度、填充、边距和边框设置计算尺寸的方式不同。在标准合规模式下，盒子的有效宽度和高度是通过添加所有这些参数来计算的（请在网上搜索更多详细信息）。

因此，由于您指定了 1px 边框，您的第一个输入字段将是 302px 宽（300px + 2*1px 左右边框）。您提到的FF和IE之间的不一致可能是由于“填充”设置的“默认值”不同造成的。我刚刚使用 DOCTYPE 测试了您的代码，并且没有为输入字段填充 - 两个浏览器都以相同的方式呈现它。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

现在，对于间隔图像：不要使用它们。你不需要它们。只需为间隙的输入字段使用“3px”的右边距。

input.quirks {
    margin: 1px 3px 1px 0px;  /* 3px right margin */
    border: solid black 1px;
    padding: 0px;             /* so that IE and FF use the same padding */
}

然后进行数学计算以确定正确的“宽度”设置，以使每行中所有宽度（包括内边距、边框和边距！）的总和相等，例如：

300px + 5px = 305px
145px + 150px + 2*5px = 305px
90px + 100px + 100px + 3*5px = 305px

请注意，“5px”由 3px-right-margin 和 2 倍的边框 (1px) 组成。

给你。如果您想使用不同的填充以获得更好的外观，只需将其包含在您的计算中！

【讨论】：

我能说什么...我昨天的所有时间都在处理这种性质的问题...我按照指示的步骤进行操作，并且效果很好！非常感谢。这些图像是否可能导致其他问题？...我喜欢它们不是必需的。代码更容易阅读：D
我认为这些图像不会引起其他问题。但是，由于您没有在标记中指定“宽度”和“高度”属性，浏览器需要先下载图像才能知道为它们节省多少空间，这可能会导致布局在加载时“跳跃” .
在处理怪异或标准模式下的盒子模型时，CSS box-sizing 属性有很大帮助，请参阅quirksmode.org/css/box.html。这会阻止你自己做数学。

【解决方案2】：

由于您的问题主要是由 IE 和 Firefox 中的不同默认值引起的，您可能对 Reset CSS 样式表感兴趣，其中包含诸如填充之类的值，有效地清除每个浏览器的默认值，以便它们都以相似的方式呈现.

【讨论】：

Why “Reset” Style Sheets Are Bad