以下 Html 在 FireFox 或 IE7/8 中对我来说效果很好(有或没有 Style 标签)
<!-- 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”模式以外的任何模式都会导致浏览器对设置文本框宽度的尝试做出不同的 react 。这似乎导致我可以更正我对 FF 或 IE 的说明，而另一个突然失败。
一些细节...
1.> 这里的目标是当在每个浏览器中呈现时，3 行的宽度应该完全相同。跨浏览器呈现的宽度相同并不重要，只是它们在每个浏览器中显示正确对齐/对齐。
2.> 引用的图像是一个 3 像素宽和 1 像素高的间隔图像(一个替代方案也很好)
3.> 如果可能的话，我不想介绍表格。
似乎 Quirks 模式是唯一在浏览器中保持一致的模式。然而，我担心 IE8 的最终版本或确实在未来的某些浏览器中，怪癖模式将不会成为默认模式。
我该怎么办？如何指定一个 DocType(并可能更改我的 html)来创建跨浏览器的一致外观？
最佳答案
“Quirks”和“Standards Compliance”模式之间的主要区别在于不同的“盒子模型”，这导致基于宽度/高度、填充、边距和边框设置计算大小的不同方式。在 Standard Compliance 模式下，框的有效宽度和高度是通过将所有这些参数相加来计算的(请在网上搜索以获取更多详细信息)。
因此，由于您指定了 1 像素的边框，因此您的第一个输入字段将为 302 像素宽(左右边框为 300 像素 + 2*1 像素)。你提到的FF和IE不一致，可能是由于“padding”设置的“默认值”不同造成的。我刚刚使用 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 右边距和 2 倍边框 (1px) 组成。
给你。如果您想使用不同的填充以获得更好的外观和感觉，只需将其包含在您的计算中即可!
关于html - 如何使标准模式和怪异模式一起工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/416094/