CSS中input标签text与button设置同样高度却等高的原因

最新推荐文章于 2023-03-30 13:00:38 发布

YeSyinnng

最新推荐文章于 2023-03-30 13:00:38 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： c's's 文章标签： css input button text

本文链接：https://blog.youkuaiyun.com/qq_39532595/article/details/84262686

本文探讨了在CSS中，input标签的text与button设置相同高度却显示等高的问题。文章分析了Quirks模式和标准模式下，两者的高度计算方式，指出在Quirks模式下，input元素的宽高设置会生效，而text在标准模式下考虑了padding和border。最终，提供了解决这种高度差异的方法。

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

CSS中input标签text与button设置同样高度却等高的原因

以前用优快云都是用来下载文件，浏览博客，自从入了前端的坑，发现需要学习的东西很多很多，一面学习，一面找bug，记录一下无意间发现的bug 记录一下：）（ps：博客用的很不熟练，看来要多写写）

bug如下：
在这里插入图片描述

Quirks模式

先记录一下Quirks模式，百度了一下，有叫怪异模式，有叫兼容模式，嗯，怪异模式更加适合吧，手动再见，找了这么久的bug。

Quirks：新版本的浏览器故意模拟许多旧浏览器中的bug。嗯，简单来说，input元素属于行内块元素，在标准模式下，也就是在通用的模式下，给行内元素设置宽高，是不会生效的，而在Quirks模式下，会生效。—问题所在

问题代码

input[type=text]{
	height:23px;
	width:420px;
}
/*文本框设置高度为23 按钮设置高度为23 显示出来 缺不一样高*/
input[type=button]{
	height:23px;
	width:100px;
}

Quirks模式下的button计算

在Quirks模式下计算button的宽高：

button实际高度=height-padding-border
实际显示高度=23px
23px包含了paddind与border的值
所以button高度是23px，实际23px包含了按钮自带的内边距及边框的值

最低0.47元/天解锁文章

200万优质内容无限畅学