Question

以下代码似乎有效：

<!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

Answer 1

添加

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

Answer 2

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

这应该有效。添加Display:Block;将使您的宽度和高度属性正常工作。

魔术提交按钮！

2 个答案: