css中input与button在一行高度不一致的解决方法
2024-08-29 21:54:49
在写html表单的时候,发现了一个问题:input和button设置了一样的宽高,但是显示高度确不一致,先看代码:
<style>
input,button{
width:100px;
height: 60px;
}
</style>
<input type="text" value="测试"/>
<input type="button" value="按钮"/>
<button>按钮</button>
在谷歌浏览器中显示如下:
很明显的看出高度不一样。这是由于button在高度计算上始终使用了Quirks模式。在Quirks模式下,边框的计算是在元素的宽度内的,而不像标准模式一样计算在外部(button的高度包含边框的高度,而文本框text则不包含边框高度。),所以需要加2行代码-webkit-box-sizing:border-box;-moz-box-sizing:boder-box;如下:
<style>
input,button{
-webkit-box-sizing:border-box;
-moz-box-sizing:boder-box;
width:100px;
height: 60px;
}
</style>
熊猫办公https://www.wode007.com/sites/73654.html
现在高度就一致了:
box-sizing:border-box说明;
当我们设置box-sizing: border-box;时,border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和 “height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负,必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。
备注:除了上面方式外,我们还可以通过设置border:0;padding:0;或者根据Quirks模式的区别,设置不同的height值,同样可以达到高度一致的效果
最新文章
- markdown-js 添加表格,代码块 parse
- 【Cocos2d-x游戏开发】浅谈游戏中的坐标系
- grabcut
- Markdown Example
- HDU 2473 Junk-Mail Filter(并查集+删点,设立虚父节点/找个代理)
- android 控件花屏问题
- javascript 数据结构和算法读书笔记 >; 第三章 列表
- NodeJS之微信开发
- pip包导出
- HTML+CSS+JavaScript-案例
- 2018-2019-2 《网络对抗技术》 Exp1 PC平台逆向破解 20165215
- 关于nginx安装的收藏
- day75 form 组件(对form表单进行输入值校验的一种方式)
- VNC安装配置
- [ZJOI2008]泡泡堂BNB
- spring事物要知道
- Latex Error cannot determine the size of graphic 报错的解决的方法
- java二维码生成工具
- mysql 数据操作 多表查询 准备
- BootstrapValidator超详细教程