爲什麼元素與應用的XHTML Transitional文檔類型看起來不同？

我有兩個要素一個簡單的頁面：爲什麼元素與應用的XHTML Transitional文檔類型看起來不同？

<html> 
    <body> 
    <input type="text" style="height: 18px; width: 120px" /><br/> 
    <select style="height: 18px; width: 120px"> 
     <option>test</option> 
    </select> 
    </body> 
</html>

在試圖使其符合W3C標準和跨瀏覽器的一致性顯示，我添加了一個DOCTYPE元素和XML命名空間：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <body> 
    <input type="text" style="height: 18px; width: 120px" /><br/> 
    <select style="height: 18px; width: 120px"> 
     <option>test</option> 
    </select> 
    </body> 
</html>

CSS只是試圖使文本框和選擇框的寬度和高度相同。

但是，出於某種原因，第二頁不再尊重我在輸入標籤上設置的高度和寬度CSS屬性。每個瀏覽器（IE，Firefox，Chrome）中的文本框高出約4個像素，每個瀏覽器中的寬度爲4-6像素。

我已經使用各種開發工具來試圖找出正在應用的附加標記，但是我找不到任何標記。

如果可能，有人可以向我解釋這種行爲嗎？

任何幫助將不勝感激。

感謝，

B.J.

來源

2010-08-09 Benny

你的代碼是不符合XHTML，你就錯過了一個頭元素：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <!-- head goes here --> 
    <head> 
    <title>My page title</title> 
    </head> 

    <body> 
    <input type="text" style="height: 18px; width: 120px" /><br/> 
    <select style="height: 18px; width: 120px"> 
     <option>test</option> 
    </select> 
    </body> 
</html>

如果你想輸入你要他們的風格如下相同：

<style type="text/css"> 
input[type="text"], select{ 
    width: 120px; 
    height: 18px; 
    padding: 0; 
    margin: 0; 
    border:1px solid grey; 
} 
</style>

~~這是編寫正確的XHTML的好參考 http://www.w3schools.com/xhtml/xhtml_intro.asp~~

一篇關於良好資源和很好的解釋爲什麼上面的網站不是一個很好的參考：W3Fools。

來源

2010-08-09 15:09:01 hitautodestruct

這讓我更接近一些，但是元素仍然不完全相同。該文本框大約比選擇框高2個像素。 – Benny 2010-08-09 16:26:13

我剛剛瀏覽了w3schools的XHTML頁面，坦白地說，這些建議非常糟糕，在我們看到關於SO的常規問題的所有地方都有關鍵的遺漏。我不會推薦給任何人。 – Alohci 2010-08-09 19:41:15

選擇框始終存在樣式問題，請嘗試將寬度和高度添加到select以匹配輸入。 – hitautodestruct 2010-08-10 07:20:54

不specificying一個DOCTYPE可以把許多瀏覽器爲兼容模式。如果沒有真正的調查，我猜沒有doctype的頁面渲染不正確。嘗試在第一個樣本上放置文檔類型（html4或其他），看看會發生什麼。

編輯：渲染差異的最大原因來自兼容模式。在嘗試尋找差異之前，請確保您的標記有效（http://validator.w3.org/），就像您的stlyesheets（http://jigsaw.w3.org/css-validator/）一樣。如果您的標記沒有告訴瀏覽器如何解析它，或者存在錯誤，瀏覽器可能會在渲染頁面時出現錯誤。

在您的示例中，它可能在no-doctype標記上運行quirks模式，導致樣式表錯誤。

來源

2010-08-09 14:39:55

第二個示例是添加了doctype和名稱空間的第一個示例。 – Benny 2010-08-09 19:49:21

雖然第一個例子可能是問題所在。如果瀏覽器以兼容模式呈現它，因爲它沒有文檔類型。 – 2010-08-09 21:54:47

我在說第一個和第二個例子是一樣的;第二個例子是解決第一個例子的問題。 – Benny 2010-08-10 13:39:24

爲什麼元素與應用的XHTML Transitional文檔類型看起來不同？

回答

相關問題