2

以下 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），这将在浏览器中创建一致的外观？

4

2 回答 2

9

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

因此，由于您指定了 1 像素边框，您的第一个输入字段将是 302 像素宽（左右边框为 300 像素 + 2*1 像素）。您提到的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) 组成。

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

于 2009-01-06T12:25:18.813 回答
0

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

于 2009-01-24T22:15:51.933 回答