以下 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）以在浏览器之间创建一致的外观？
“怪癖”和“标准合规性”模式之间的主要区别是不同的“盒子模型”，这导致基于宽度/高度、填充、边距和边框设置计算尺寸的不同方式。在标准合规模式下，盒子的有效宽度和高度是通过添加所有这些参数来计算的（请搜索网络以获取更多详细信息）。
因此，由于您指定了 1px 边框，因此您的第一个输入字段将为 302px 宽（左右边框为 300px + 2*1px）。您提到的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) 组成。
就这样吧。如果您想使用不同的填充以获得更好的外观和感觉，只需将其包含在您的计算中即可！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
