如何讓標準模式以及怪癖模式工作？

以下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>

不過據我所知，在頂部沒有一個DOCTYPE所述HTML是造成兩者都瀏覽器以「怪癖」模式工作。

我被告知這是不好的。

我已經嘗試了幾種DocTypes，但還沒有找到DocType/HTML組合，這兩種瀏覽器都會產生正確的渲染。

「Quirks」模式以外的任何內容都會導致瀏覽器對設置文本框寬度的嘗試做出不同反應。這似乎導致我可以糾正我對FF或IE的指示，並突然另一個失敗。

一些細節...

1.>這裏的目的是，3行應該似乎是恰好當每個瀏覽器中呈現相同的寬度。在瀏覽器中呈現的寬度是相同的，這並不是祕密，而只是它們在每個瀏覽器內顯示正確/對齊。

2.>引用的圖像是一個間隔圖像3個像素寬和1的高（此替代也將是很好的）

3.>我不想如果在所有可能引入表。

似乎怪癖模式是唯一在瀏覽器中保持一致的模式。不過，我擔心IE8的最終版本，或者確實在某些未來的瀏覽器中，怪癖模式不會成爲默認模式。

我該怎麼辦？如何指定一個DocType（也許改變我的HTML），這將創建一個跨瀏覽器一致的外觀？

來源

2009-01-06 Rory Becker

「怪癖」和「標準遵從性」模式之間的主要區別是不同的「盒子模型」，這會導致根據寬度/高度，填充，邊距和邊框設置計算尺寸的不同方式。在標準合規模式下，通過添加所有這些參數來計算框的有效寬度和高度（請在網上搜索以獲取更多詳細信息）。

因此，由於您指定了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 */ 
}

然後做數學題，以確定正確的「寬度」設置，使每一行中的所有寬度（includung填充，邊界和利潤！）的總和是相等的，例如：

300px + 5px = 305px 
145px + 150px + 2*5px = 305px 
90px + 100px + 100px + 3*5px = 305px

請注意，「5px」由3px右邊距和2倍邊框（1px）組成。

你走了。如果你想使用不同的填充來獲得更好的外觀，只需將其包含在你的計算中即可！

來源

2009-01-06 12:25:18

我能說什麼......我昨天花了所有的時間參與了這種性質的問題......我按照指示的步驟進行了操作，它的工作非常好！非常感謝。這些圖像是否有可能導致其他問題？我喜歡它們不是必需的。該代碼甚至更容易閱讀：D – 2009-01-06 12:37:12

我不認爲這些圖像會引起其他問題。但是，由於您沒有在標記中指定「寬度」和「高度」屬性，因此瀏覽器在知道需要爲它們節省多少空間之前需要下載圖像，這可能會導致佈局在加載時「跳躍」。 – 2009-01-06 15:09:20

這是讓你的DOCTYPE權的優秀文章：
http://www.alistapart.com/stories/doctype/

來源

2009-01-24 22:05:46 gkrogers

由於您的問題主要是在IE和Firefox不同的默認值造成的，你可能有興趣在Reset CSS樣式表，其中包括價值像填充這樣的東西，有效地清除每個瀏覽器的默認設置，以使它們都呈現相似的效果。

來源

2009-01-24 22:15:51

如何讓標準模式以及怪癖模式工作？

回答

相關問題