原因是 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. UltraEdit设置打开的文件类型，怎么打开大文本文件

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

  2. Diskpart手动创建EFI、MSR引导分区

    当给电脑加新硬盘时候,并且需要把新硬盘当作系统盘,有几种方法来为新硬盘创建引导分区: 可以选择用U盘刻录微软原版系统镜像,直接从U盘启动,然后直接创建分区,直接装,会自动为硬盘创建好几个引导分区. 进 ...

  3. oracle 数据库创建表

    好好好好久没更新了,最近真是堕落了,做的都是小菜鸟做的东西,都没得写,但是最近数据库突然从mysql换到oracle,哈哈哈哈哈,还真是挺复杂的 1.首先建表 fund 是表名称 其他的是字段名称 c ...

  4. SpringMvc中文件的上传

    本文转自:http://www.cnblogs.com/fjsnail/p/3491033.html 三个方法没有都测试,先get再说 第一个方法慢不知道是不是因为写的代码是按字节读取的,没有用Buf ...

  5. 查询数据操作：limit

    1.作用: 在查看数据时用于限制获得的记录数量,一般放在最后. 2.语法: limit offset,row_count; 解析: offset:偏移量,索引值默认从0开始,可以省略 row_coun ...

  6. js + jquery 实现分页区翻页

    简单来说,情况是这样的,假如做好了对动漫每一集进行分页,如下图: 但当分页太多就会变得不能看,而且前后箭头也不能只是摆设. 想要得到类似这样效果: 网上搜了一会翻页相关的库没什么效果,也不太合适自己的 ...

  7. 解密国内BAT等大厂前端技术体系-美团点评之下篇（长文建议收藏）

    引言 在上篇中,我已经介绍了美团点评的业务情况.大前端的技术体系,其中大前端的技术全景图如下: 上篇重点介绍了工程化和代码质量的部分,工程化涵盖了客户端持续集成平台-MCI.全端监控平台-CAT.移动 ...

  8. Redis-消息

    Redis 发布订阅(实际开发不使用) Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. Redis 客户端可以订阅任意数量的频道. 下图 ...

  9. JS高级---利用原型共享数据

    什么样子的数据是需要写在原型中? 需要共享的数据就可以写原型中 原型的作用之一: 数据共享 //属性需要共享, 方法也需要共享 //不需要共享的数据写在构造函数中,需要共享的数据写在原型中 //构造函 ...

  10. eclipse 自定义代码块设置(代码模板)

    eclipse设置自定义代码模板 window -> show View -> other -> Templates 原来main模板 修改模板 再次插入