原因是 input和button的高度计算不一样，

input高度不包括border。

button高度包括border。

解决方法：

1、box-sizing：border-box；

2、border：0px；用box-shadow模拟border；box-shadow:0px 0px 1px black;

以上要ie8才支持。

如果要支持ie6、7、8就需要hack下，input改小一点height了。

input和button 高度不一致问题的更多相关文章

  1. 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题

    解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...

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

    在写html表单的时候,发现了一个问题:input和button设置了一样的宽高,但是显示高度确不一致,先看代码: <style> input,button{ width:100px; h ...

  3. input type=button设置高度不管用

    <input type="button" name="calRate" id="calRate" value="查询&quo ...

  4. input、button、文字的对齐水平对齐

    input.button.文字的对齐~! 1.input文本框下移的方法:padding-top ,可以解决文本框向下移. 2.input文本框和button对齐可以给他们外面加table (例如,谷 ...

  5. button高度改变

    代码:<input type="button" name="submit" value="submit" /> 利用css改变b ...

  6. 关于<button> 没写 type='button' 导致点击时提交以及<button>和<input type="button">的区别

    这是我的第一篇博客,如果写的不好,请见谅 这是一个关于button按钮一个小问题 最近刚开学跟着老师一起写代码,在模仿JAVA web程序设计(慕课版) P61页第三章 Ajax处理XML的代码中发现 ...

  7. input 和 button 的 border-box 模型和 IE8 错位

    用 input 和 button 时出现了几个奇怪的现象,先放几个 input 和 button CSS: * { margin:; padding:; } input,button { width: ...

  8. input 与 button 的问题 （空隙/不等高/对不齐）及 解决办法

    1. input 与 button 为什么有空隙? - 要明白为什么,需要了解一下几点基础知识(耐心看完,你会发现竟如此简单)     1. input 与 button 都属于行级块元素,都具有文本 ...

  9. 苹果iphone手机上input的button按钮颜色显示有问题，安卓却没问题

    苹果手机中会如类似上图,安卓却可以按自己写的来显示 解决办法: -webkit-appearance: none; 以上即可,当然样式中可以加上通用的: 通用:input[type=button], ...

随机推荐

  1. .NET知识梳理——2.反射

    1. 反射 1.1        DLL-IL-Metadata-反射 DLL:程序集,包含IL 和Metadada IL:面向对象中间语言(不太好阅读) Metadata描述了dll.exe中的各种 ...

  2. Visual C++ 2013 and Visual C++ Redistributable Package 更新版官网下载地址

    Visual C++ 2013 and Visual C++ Redistributable Visual C++ 2013 and Visual C++ Redistributable Packag ...

  3. 线性筛-prime，强大O(n)

    和朴素的素数筛法一样,flag数组,记录x是否为素数 flag[x]=0,x为合数 falg[x]=1,x为素数 flag[1],无定义 其核心思想是,用x筛除与之差异最小的y,达到时间上O(n)的目 ...

  4. vue生命周期钩子函数详解

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_35585701/article/ ...

  5. jmeter巧用自增长型变量

    实现目的 在进行性能测试时,某些请求中的参数值并不允许被重复使用,比如账号的创建.开通授权等服务,这时就需要在jmeter中构造一些自增长型的变量,供后续请求使用,以解决参数值重复的问题. 脚本实现 ...

  6. Java中List集合的逆序排列

    Collections.reverse(list);  //实现List集合逆序排列

  7. jmeter的使用---压力测试

    jmeter用于压力测试 首先我们要区别压力和攻击,当设立了不适当的线程数量和准备时长,就容易造成攻击. 线程数:虚拟用户数.一个虚拟用户占用一个进程或线程.设置多少虚拟用户数在这里也就是设置多少个线 ...

  8. 一份比较详细的DOS命令说明

    一份比较详细的DOS命令说明 1 echo 和 @ 回显命令 @                     #关闭单行回显 echo off              #从下一行开始关闭回显 @echo ...

  9. Spring Boot 编辑器 IDEA 免费许可申请

    最近 IDEA 陆续到期(试用版)听说可以申请开源许可,试试吧. 点击 https://www.jetbrains.com/shop/eform/opensource?product=ALL 填写相关 ...

  10. socket模块（套接字模块）

    socket模块(套接字模块) 一.最简单版本(互传一次就结束) # 客户端 import socket client = socket.socket() client.connect(('127.0 ...