魔術提交按鈕！

下面的代碼似乎是有效的：魔術提交按鈕！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> 
<title>Sample Form</title> 
<style type="text/css"> 
    input {width:500px; padding:3px; background:green; border:1px solid red;} 
    textarea {width:500px; height:150px; padding:3px; background:green ; border:1px solid red;} 
</style> 
</head> 
<body> 
    <form action=""> 
    <p><input id="entry_0"><label for="entry_0">Name</label></p> 
    <p><input id="entry_1"><label for="entry_1">Email</label></p> 
    <p><input id="entry_2"><label for="entry_2">URL</label></p> 
    <p><textarea id="entry_3" rows="5" cols="5"></textarea></p> 
    <p><input type="submit" value="Submit"></p> 
    </form> 
</body> 
</html>

然而，提交按鈕寬度比其它領域更短。奇怪的是，當我刪除doctype聲明，他們都獲得相同的長度。我在做什麼錯了，我怎樣才能讓他們相同的大小？

提前致謝！ Rain Lover

來源

2010-12-18 Mori

只需添加

webkit-box-sizing: content-box ; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: content-box ; /* Firefox, other Gecko */ 
box-sizing: content-box ;   /* Opera/IE 8+ */

您input CSS規則，以確保萬無一失。

注意：這是一個CSS3屬性，所以它不適用於非現代瀏覽器。
參考：http://www.w3.org/TR/css3-ui/#box-sizing

來源

2010-12-18 21:13:09

完美，謝謝！ :) – Mori 2010-12-19 16:50:48

input {display:block; width:500px; padding:3px; background:green; border:1px solid red;}

這應該有效。添加Display:Block;將使您的寬度和高度屬性正常工作。

來源

2010-12-18 21:11:45 Brad

這給了它一個嘗試，它府並沒有區別。 – Mori 2010-12-19 16:49:58

魔術提交按鈕！

回答

相關問題