码迷,mamicode.com
首页 > Web开发 > 详细

css中input与button在一行高度不一致的解决方法

时间:2020-06-16 20:43:12      阅读:115      评论:0      收藏:0      [点我收藏+]

标签:问题:   熊猫   模式   class   谷歌浏览器   不同   方向   vue   效果   

在写html表单的时候,发现了一个问题:input和button设置了一样的宽高,但是显示高度确不一致,先看代码:

1 <style>
2 input,button{
3     width:100px;
4         height: 60px;
5 }
6 </style>
7 <input type="text" value="测试"/>
8 <input type="button" value="按钮"/>
9 <button>按钮</button>

 

在谷歌浏览器中显示如下:

技术图片

 

很明显的看出高度不一样。这是由于button在高度计算上始终使用了Quirks模式。在Quirks模式下,边框的计算是在元素的宽度内的,而不像标准模式一样计算在外部(button的高度包含边框的高度,而文本框text则不包含边框高度。),所以需要加2行代码-webkit-box-sizing:border-box;-moz-box-sizing:boder-box;如下:

1 <style>
2 input,button{
3     -webkit-box-sizing:border-box;
4         -moz-box-sizing:boder-box;
5         width:100px;
6         height: 60px;
7 }
8 </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值,同样可以达到高度一致的效果

 

css中input与button在一行高度不一致的解决方法

标签:问题:   熊猫   模式   class   谷歌浏览器   不同   方向   vue   效果   

原文地址:https://www.cnblogs.com/ypppt/p/13143825.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!