如何使标准模式和怪癖模式一起工作？

StackOverflow https://stackoverflow.com/questions/416094

题

以下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＆GT;这里的目标是在每个浏览器中呈现时，3行应该看起来完全相同。渲染的宽度在浏览器中是相同的并不是唯一的，只是它们在每个浏览器中显示正确的对齐/相似。

2＆GT;参考的图像是3像素宽和1高的间隔图像（替代它也是好的）

3＆GT;如果可能的话，我不想引入表格。

好像Quirks模式是浏览器中唯一一致的模式。不过我担心的是IE8的最终版本或者确实在未来的浏览器中，怪癖模式不会是默认模式。

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

有帮助吗？

解决方案

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

因此，由于您指定了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右边距和2倍边界（1px）组成。

你去吧。如果您想使用不同的填充物来获得更好的外观，请将其包含在您的计算中！

其他提示

这是一篇关于让您的DOCTYPE正确的优秀文章：
http://www.alistapart.com/stories/doctype/

由于您的问题主要是由IE和Firefox中的不同默认值引起的，您可能会对重置CSS 样式表，其中包含填充等内容的值，有效地清除每个浏览器的默认值，以便它们都能以相似的方式呈现。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top