Web 技术研究所

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

现代浏览器的怪异模式对INPUT的影响

  在页面缺少DOCTYPE声明时,现代浏览器也会进入怪异模式。但现代浏览器的怪异模式已经不同于以前IE的怪异模式了。现代浏览器的怪异模式在很多方面都已经非常接近于普通模式了,唯有原生控件的默认样式依然备受影响,这带来了一系列兼容问题。
  其实这个问题很久以前的文章“文本框和按钮的高度计算方式”中就提到过,但只说明了现象。实际上最大的问题在于box-sizing的默认值。在普通模式下,box-sizing默认为content-box;而怪异模式下为border-box。因此又导致了widthheight,这些属性可能存在的差异。比如下面这个表就是Chrome和Firefox在普通与怪异模式之间的样式差异:
Chrome普通怪异
box-sizingcontent-boxborder-box
width149px153px
height16px22px
padding1px 0px
border-width2px
Firefox普通怪异
box-sizingcontent-boxborder-box
width149px155px
height15px21px
padding2px
border-width1px
  实际上widthheight是相对的,根据font-size计算,但普通模式与怪异模式之间永远存在一个差异,这个差异恰好等于paddingborder-width在相应方向上的和。这就是因为box-sizing不同,而页面又需要渲染出相同的效果,所以在widthheight上修改。
  总之,造成这个差异的元凶就是box-sizing在怪异模式和普通模式下的默认值不同。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^