浏览器发现诡异的input代码

最近遇到的一个比较诡异的input变化,前后的代码都是一致的,却出现不一样的显示效果,然后我查看了两者的对比发现多了下面这行代码:

input:not([type="image"]), textarea {
  box-sizing: border-box;
}

可以通过设置特定的input为box-sizing:content-box;

但其实本身的doc已经发生了变化,可能是doctype不见了,或者是doctype格式错误了。

如果你发现input的输入框变窄了,可以检查一下:doctype的变化,我们常用HTML5的标准来书写:

<!doctype html>

原文链接:浏览器发现诡异的input代码 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/input-box-sizing.html)

发表评论

请登录后发表评论:

2 Responses to “浏览器发现诡异的input代码”

  1. LCY

    个人猜想的原因是, border-box高度会把padding和border算上, 如果input之前是靠padding来撑起高度的, 用了border-box, 高度肯定会变小

    登录回复
    • 前端博客

      嗯,我里面已经写明原因了,是因为浏览器的模式不是标准的,所以浏览器解析input的盒子属性为border-box。

      登录回复