我如何使标准模式工作以及怪癖模式？ [英] How do I make Standards mode work as well as quirks mode?
问题描述
< p> ！ - 故意没有导致怪癖模式的DocType - >
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< style type =text / css>
Input.quirks
{
margin：1px 0px 1px 0px;
border：纯黑1px;
}
< / style>
< / head>
< body>
应该以怪癖模式工作< br />
< input class =quirkstype =textstyle =width：300px; />< br />
< input class =quirkstype =textstyle =width：147px; />< img src =./ Graphics / SpacerPixel.gifborder =0/>< input class =quirkstype =textmaxlength =25style =width：150px; />< br />
< input class =quirkstype =textstyle =width：94px; />< img src =./ Graphics / SpacerPixel.gifborder =0/>< input class =quirkstype =textstyle =width：100px; />< img src =./ Graphics / SpacerPixel.gifborder =0/>< input class =quirkstype =textvalue =DA8 1DEstyle =width：100px ; />
< / body>
< / html>
然而我被告知，在所述HTML的顶部没有DocType导致两个浏览器工作在怪癖模式。
我被告知这是坏的。
我已经尝试了几种DocTypes但没有找到一个DocType / HTML组合，在两个浏览器中产生正确的渲染。
除了Quirks模式之外的任何内容都会导致浏览器对尝试设置文本框的宽度。这似乎导致一个位置，我可以纠正我的FF或IE的指示，突然其他将失败。
一些细节...
1.>这里的目标是3行应该是在每个浏览器中呈现的时候都是相同的宽度。不同的浏览器渲染的宽度是相同的，只不过它们在每个浏览器内都显示正确/对齐。
2.>引用的图像是一个间隔图像宽度为3像素，高度为1（也可以选择这种方式）
3.>如果可能，我不想引入表格。 >
似乎Quirks模式是整个浏览器中唯一一致的模式。我担心的是，IE8的最终版本，或者确实在某些未来的浏览器中，怪癖模式不会成为默认模式。
我应该怎么做？如何指定一个DocType（也许改变我的HTML），这将创建一个跨浏览器的一致的外观？
怪癖和标准合规模式的主要区别在于不同的盒子模型，这会导致根据宽度/高度，填充，边距和边框设置计算大小的不同方式。在标准合规模式下，通过添加所有这些参数来计算一个盒子的有效宽度和高度（请在网络上查找更多详细信息）。
因此，一个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\">
现在，对于间隔图像：不要使用它们。你不需要他们。
输入.quirks {
margin：1px 3px 1px 0px; / * 3px右边距* /
边框：纯黑1px;
padding：0px; / *使IE和FF使用相同的填充* /
}
然后执行数学来确定正确的宽度设置，以便每行中所有宽度（包括填充，边框和边距！）的总和相等，例如：
300px + 5px = 305px
145px + 150px + 2 * 5px = 305px
90px + 100px + 100px + 3 * 5px = 305px
$ b 你走了。如果你想使用不同的填充来获得更好的外观，那就把它包含在你的计算中吧！
The following Html works great for me in FireFox or IE7/8 (with or without the Style Tag)
<!-- 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>
However I am told that the absence of a DocType at the top of said HTML is causing both both browsers to work in "Quirks" mode.
I am told this is bad.
I have tried several DocTypes but have not found a DocType/HTML combination which yields a correct rendering in both browsers.
Anything other than "Quirks" mode causes the browsers to react differently to the attempt to set the width of a textbox. This seems to lead to a position where I can correct my instructions for either FF or IE and suddenly the other will fail.
Some detail...
1.> The objective here is that the 3 rows should appear to be the same width exactly when rendered in each browser. It is not nessecary that the rendered widths are the same across browsers, merely that they appear correctly justified/alighned inside each browser.
2.> The image referenced is a spacer image 3 pixels wide and 1 high (an alternative to this would also be good)
3.> I do not want to introduce tables if at all possible.
It seems as though the Quirks mode is the only mode which is consistent across the browsers. I am worried however that the final version of IE8 or indeed in some future browser, the quirks mode will not be the default.
What should I do ? How do specify a DocType (and maybe alter my html) which will create a consistent look across browsers?
解决方案 The main difference between "Quirks" and "Standards Compliance" mode is a different "box model" which results in different ways of calculating sizes based on width/height, padding, margin and border settings. In Standard Compliance mode, the effective width and height of a box is calculated by adding all these parameters (please search the web for more details).
So, since you specify a 1px-border, your first input fields will be 302px wide (300px + 2*1px for the border left and right). The inconsistency between FF and IE you mentioned may be caused by different "default values" for the "padding" setting. I just tested your code with a DOCTYPE and no padding for the input fields -- both browsers rendered it the same way.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Now, for the spacer images: Don't use them. You don't need them. Just use a right-margin of "3px" for the input fields for the gap.
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 */
}
Then do the math to determine the correct "width" settings so that the sum of all widths (includung padding, border and margin!) in each row are equal, for example:
300px + 5px = 305px
145px + 150px + 2*5px = 305px
90px + 100px + 100px + 3*5px = 305px
Notice that "5px" consists of the 3px-right-margin and 2 times the border (1px).
There you go. If you want to use a different padding for a nicer look-and-feel, just include it in your calculations!
这篇关于我如何使标准模式工作以及怪癖模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
