Ror*_*ker 2 html firefox doctype internet-explorer-8 internet-explorer-7
以下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),这将在浏览器中创建一致的外观？
"Quirks"和"Standards Compliance"模式之间的主要区别是一个不同的"盒子模型",它导致根据宽度/高度,填充,边距和边框设置计算大小的不同方式.在标准符合性模式下,通过添加所有这些参数来计算框的有效宽度和高度(请在Web上搜索更多详细信息).
因此,由于您指定了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)组成.
你去吧 如果您想使用不同的填充以获得更好的外观,请将其包含在您的计算中!