原因是 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. 通过scrapy，从模拟登录开始爬取知乎的问答数据

    这篇文章将讲解如何爬取知乎上面的问答数据. 首先,我们需要知道,想要爬取知乎上面的数据,第一步肯定是登录,所以我们先介绍一下模拟登录: 先说一下我的思路: 1.首先我们需要控制登录的入口,重写star ...

  2. 229. 求众数 II

    Q: 给定一个大小为 n 的数组,找出其中所有出现超过 ⌊ n/3 ⌋ 次的元素. 说明: 要求算法的时间复杂度为 O(n),空间复杂度为 O(1). 示例 1: 输入: [3,2,3] 输出: [3 ...

  3. HTML前端入门归纳——布局

    本人一直在从事.net的开发,界面都是采用的WPF,近期花了一个多月进行HTML前端的学习,在这里呢进行学习总结和归纳. 本系列将主要分为4个模块: 控件 样式 布局 JavaScript 根据多年W ...

  4. Demo：基于 Flink SQL 构建流式应用

    Flink 1.10.0 于近期刚发布,释放了许多令人激动的新特性.尤其是 Flink SQL 模块,发展速度非常快,因此本文特意从实践的角度出发,带领大家一起探索使用 Flink SQL 如何快速构 ...

  5. Nuxt 环境搭建已经编写第一个Nuxt应用

    在学习Nuxt 之前 首先我们要有node ,然后因为Nuxt 是一个基于 Vue.js 的轻量级应用框架,所以在开发之前需要安装(后面纯属作者猜想并且猜想就是这个原因...) npm install ...

  6. Navicat Premium破解

    1.正常下载安装 2.把PatchNavicat.exe文件放到Navicat安装目录下 3.以管理员身份启动PatchNavicat.exe 4.运行Navicat即可

  7. 163music 反爬分析

    # 网易163 音乐的  mp3下载 .mp3 下载的一个API吧 封 IP 的一种报错 网易云就给我返回了一个{"code":-460,"msg":" ...

  8. 南京邮电大学网络攻防平台(NCTF)-MD5-Writeup

    南京邮电大学网络攻防平台-MD5-Writeup 题干如下: 分析: 遍历 TASC?O3RJMV?WDJKX?ZM(?替换为其他),找到md5为e9032???da???08????911513?0 ...

  9. java.net.URISyntaxException: Illegal character in query at index 147

    这是url出现了特殊字符,需要将特殊字符进行替换

  10. Nginx开始（自己使用，简单开始）

    Nginx 1.网址 2.安装 如果需要资料的话可以直接来下载进行下载 前提 sudo yum install yum-utils 云主机重启之后需要执行 nginx -c /etc/nginx/ng ...