Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

文本框和按钮的高度计算方式

  我们先从HTML4下说起吧。这里有这两个控件, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<input type="input" value="input" />
<input type="button" value="button" />
  下面是CSS样式,我们把它的padding、margin、border,这些影响尺寸的属性都重新定义。 input {
  padding:0px;margin:0px;
  border:1px solid red;
}

  现在显示的就是这些元素本身的默认高度了,但是几乎所有浏览器下的显示都是不同的。左边是IE8、9和Chrome,中间是IE6、7和FireFox,右边是Opera。我把它们的高度列个表格吧。
浏览器text高度button高度
IE62022
IE71720
IE81818
IE9
Chrome
Firefox1820
Opera1515
  只是一个默认高度就有这样的差距,不过默认高度这种东西用的不多,所以用这个数据证明不了什么。我们试试给定高度看看会有什么差别。 input {
  padding:0px;margin:0px;
  border:1px solid red;
  height:24px;
}

  同样差别很大,我们不计较他们的位置,只看高度吧。
浏览器text高度button高度
Chrome2424
Firefox
Opera
IE6
IE72624
IE8
IE9
  如果设置高度的哈,IE6还是很乖的,而IE7、8、9就有点不听话了。如果在HTML4中使用这两个控件,就可以参考这个高度,使用hack来调整控件的高度到相同。要设置所有控件的高度到24px时,可是单独给IE7、8、9的text设置个22px的高度。至于位置问题不大,因为通常都是使用浮动布局的,给控件加上浮动就不会出现位置偏移的情况。
  也许你会说HTML4都是过时的东西了,现在都用XHTML+HTML5的。好吧,接着就来看看现在流行的XHTML。默认高度就没必要调试了,通常也不会用到控件的默认高度。我们直接把上面的代码中的文档类型换掉。 <!DOCTYPE html>
<input type="input" value="input" />
<input type="button" value="button" />

  虽然各自的定位还有点奇葩,但是仔细看就会发现,所有浏览器下的高度效果都是相同的了。如果你只因为得到这样的结果就满足了那就错了。还有一个纠结不清的问题,那就是text和button的高度计算方式的不同。难道是button与生俱来就比text低两个像素吗?别被这种表明现象迷惑了,实际上text和button脱光了衣服(把margin、padding和border设置成0)比较高度的时候是一样高的。下面这个代码就可以来验证它,这里为了防止奇葩的漂移现象影响观察,所以我加了个float。这个不会影响到高度的计算。 <!DOCTYPE html>
<input type="input" value="input" class="inp" />
<input type="button" value="button" class="btn" />
<style>
input {
  padding:0px;margin:0px;
  border-width:0px;
  height:24px;
  float:left;
}
.inp {background:red;}
.btn {background:green;}
</style>

  它们确确实实是一样高的,这只有一个解释,那就是button在高度计算上始终使用了Quirks模式。在Quirks模式下,边框的计算是在元素的宽度内的,而不像标准模式一样计算在外部,所以在text和button上同时设置边框就会得到button的高度比text小的现象。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^