原因是 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. 剑指offer 面试题38 字符串的排列

    我惯用的dfs模板直接拿来套 class Solution { public: vector<string> Permutation(string str) { if(str.empty( ...

  2. UltraEdit设置打开的文件类型，怎么打开大文本文件

    点击高级,配置,选择文件处理下的临时文件,设置如图即可打开超大文本文件. 补充:视图——显示行号.

  3. 如何创建redis集群

    1.下载redis源码包 wget http://download.redis.io/releases/redis-3.2.4.tar.gz 2.解压并安装 tar xvf redis-.tar.gz ...

  4. 吴裕雄 python 机器学习——数据预处理过滤式特征选取VarianceThreshold模型

    from sklearn.feature_selection import VarianceThreshold #数据预处理过滤式特征选取VarianceThreshold模型 def test_Va ...

  5. 优酷1080p的kux格式文件怎么转换为MP4格式？

    直接使用优酷自己的FFMPEG解码! 格式为:"优酷ffmpeg.exe的安装地址" -y -i ".kux文件储存地址" -c:v copy -c:a cop ...

  6. 使用js为表格添加一行

    今天同事问了我一个问题,为表格添加新的行,我用的js写了一下,代码如下: <!DOCTYPE html> <html> <head> <meta charse ...

  7. Educational Codeforces Round 80 (Rated for Div. 2)C（DP）

    #define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> using namespace std; ; ][],temp[][]; int ...

  8. MBA 报考

      1. 作者:MBA薛老师链接:https://www.zhihu.com/question/277811289/answer/397083199来源:知乎著作权归作者所有.商业转载请联系作者获得授 ...

  9. Wx-小程序-图片预览、保存

    点击图片预览 长按图片保存 点击按钮保存到手机相册 view: <!--wxml--> <text>点击图片预览.长按保存图片.点击按钮保存到系统相册</text> ...

  10. MSComm控件进行串口编程的基本步骤

    Visual C++为我们提供了一种好用的ActiveX控件Microsoft Communications Control(即MSComm)来支持应用程序对串口的访问,在应用程序中插入MSComm控 ...