网页的DOCTYPE声明与文本框的高度差

最新推荐文章于 2012-02-08 11:11:00 发布

iteye_20954

最新推荐文章于 2012-02-08 11:11:00 发布

阅读量63

点赞数

文章标签：脚本 XHTML HTML JavaScript ViewUI

本文探讨了特定DOCTYPE声明对HTML中输入元素高度显示的影响，并提供了解决脚本位置导致的问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页开头声明DOCTYPE为<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">的情况下，文本框的实际高度会比设定值大一些，大约有6px的差距。
比如说，一个文本框和一个按钮放一起，排一行，如果要大家看上去高度一致，按钮height=34px,那么文本框height=28px。

<!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><title>高度不一致</title></head> <body> <div style="height:34px;width:300px;border:solid 1px red;"> <input type="text" value="28px" style="height:28px;width:200px;font-size:16px;line-height:28px;float:left;" /><input type="button" value="34px" style="height:34px;width:65px;float:left;" /> </div> </body> </html>
为什么会这样？不知道。
如果将这个DOCTYPE声明去掉，高度立刻恢复正常：

有一个问题。如果页面代码用这种方式输出脚本：Response.Write(“<script>alert(‘Hello World!’);</script>”);，DOCTYPE声明也会立即失效，如果文本框设计的时候因为迁就这个高度差，这时候会立即露出原形。究其原因，这种方式输出脚本，脚本会位于DOCTYPE声明的前面，而DOCTYPE声明是要排在最前面的。

<mce:script type="text/javascript"></mce:script> <!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><title>高度不一致</title></head> <body> <div style="height:34px;width:300px;border:solid 1px red;"> <input type="text" value="28px" style="height:28px;width:200px;font-size:16px;line-height:28px;float:left;" /><input type="button" value="34px" style="height:34px;width:65px;float:left;" /> </div> </body> </html>
对付这种情况，最好用Page.ClientScript.RegisterStartupScript来输出脚本。
我想，<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这种声明里面，文本框的高度差应该有个什么属性来消除的。但如何消除，我还不知道。

有时候，Reponse输出脚本后，本来用margin:auto方式定位居中的DIV一下子跑到左边，原因也在此。