发现这个bug是因为最近眼睛不太好，所以网页大小都是正常大小的140%

就发现火狐游览器好多网页上的输入框与按钮对不齐

测试代码

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css" media="screen">

		*{

			box-sizing: border-box;

		}

		#input{

			height: 20px;

			border: 1px solid rgb(51,51,51);

			padding: 0px;

			width: 40px;

		}

		button{

			height: 20px;

			border: 1px solid rgb(51,51,51);

			padding: 0px;

			width: 40px;

		}

		div{

			border: .5px solid rgb(51,51,51);

		}

	</style>

</head>

<body>

	<input type="text" name=""  id="input">

	<button type="" >按钮</button>

	<br/>

	<br/>

	<input type="text" name=""  id="input">

	<input type="button" name=""  id="input" value="按钮">

	<br/>

	<br/>

	<button type="">按钮3</button>

	<button type="">按钮4</button>

	<br/>

	<input type="button" name=""  id="input">

	<button type="" >按钮</button>

	<div>

		asd

	</div>

</body>

</html>

　　很简单就一个输入框与按钮

先看一下网页100%大小时的效果

先看着两行代码input+button

<input type="text" name=""  id="input">
<button type="" >按钮</button>

很明显输入框比按钮低了一个像素

一开始我以为这可能是类似ie三像素的问题

但是我把网页放大到160%

变成上面border对齐下面border缺1px

网页190%

上下全部对齐

是不是觉得很奇怪吧

再测试第二组

<input type="text" name=""  id="input">

<input type="button" name=""  id="input" value="按钮">
大家可以试一下，在不同的放大倍数时会有不同的对齐方式
测试第三组
<button type="">按钮3</button>

<button type="">按钮4</button>
没有问题，任何大小倍数都没有问题
测试第三组
<input type="button" name=""  id="input">

<button type="" >按钮</button>
在不同的放大倍数时会有不同的对齐方式
目前得出的结论：输入框加按钮不论是用input+input还是input+button都会有问题
先看一下出现问题的一些页面吧
150%

上面对齐，下面有1px缩进

看了一下百度的代码：

输入框高度：34px;

按钮高度：36px;(他们估计也发现这个问题了。。。。。特地设的大点，可以在某个范围内的保持不变形)

火狐导航页

按钮下面白了一条

解决方案：

1：使用input+div(按钮)

2：使用多层嵌套用外层div的边框来遮住1px像素的问题

3：像百度一样稍微写大点，保持某些程度不变形

方案2代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" >
.big-select{
border: 1px solid rgb(51,51,51);width: 300px;
}
.select-input{
height: 20px;box-sizing:border-box;width: 200px;float: left;
}
.select-button{
height: 20px;box-sizing:border-box;width: 100px;float: left;
}
</style>
</head>
<body>
<div class="big-select">
<div class="select-input"><!--输入框-->
<input type="text" style="width: 100%;height: 20px;box-sizing:border-box;border:0px;"></input>
</div>
<div class="select-button"><!--按钮-->
<button type="" style="width: 100%;height: 20px;box-sizing:border-box;border:0px;">搜索</button>
</div>
<div style="clear: both;">

</div>
</div>
</body>
</html>

完美~无限放大缩小不变形

关于对这个问题的一些猜测

刚开始：我以为是3像素问题，后来觉得不对（因为这是火狐。。。。。）

又觉得是px计算时候的抹零取整，或者是四舍五入的类似问题（测试不是这个问题）

暂时无解

顺便发现了firebug测试工具的问题

当边框为0.7px时火狐自带的调试工具：盒模型显示.7px

firebug盒模型显示0px

游览器版本

测试时间：2016-8-23

火狐的一个bug的更多相关文章

  1. Tomcat一个BUG造成CLOSE_WAIT

    之前应该提过,我们线上架构整体重新架设了,应用层面使用的是Spring Boot,前段日子因为一些第三方的原因,略有些匆忙的提前开始线上的内测了.然后运维发现了个问题,服务器的HTTPS端口有大量的C ...

  2. MySQL关于exists的一个bug

    今天碰到一个很奇怪的问题,关于exists的, 第一个语句如下: SELECT ) FROM APPLY t WHERE EXISTS ( SELECT r.APPLY_ID FROM RECORD ...

  3. 由一个bug引发的SQLite缓存一致性探索

    问题 我们在生产环境中使用SQLite时中发现建表报“table xxx already exists”错误,但DB文件中并没有该表.后面才发现这个是SQLite在实现过程中的一个bug,而这个bug ...

  4. Win10系统菜单打不开问题的解决，难道是Win10的一个Bug ?

    Win10左下角菜单打不开,好痛苦,点击右下角的时间也没反应,各种不爽,折磨了我好几天,重装又不忍心,实在费劲,一堆开发环境要安装,上网找了很多方法都不适用.今天偶然解决了,仔细想了下,难道是Win1 ...

  5. 你可能不知道的 NaN 以及 underscore 1.8.3 _.isNaN 的一个 BUG

    这篇文章并不在我的 underscore 源码解读计划中,直到 @pod4g 同学回复了我的 issue(详见 https://github.com/hanzichi/underscore-analy ...

  6. 标准模板库(STL)的一个 bug

    今天敲代码的时候遇到 STL 的一个 bug,与 C++ 的类中的 const 成员变量有关.什么,明明提供了默认的构造函数和复制构造函数,竟然还要类提供赋值运算符重载.怎么会这样? 测试代码 Tes ...

  7. 是uibutton跟tableviewcell同步使用一个bug

    这个问题是uibutton跟tableviewcell同步使用一个bug,不关delay一点毛事,证据就是点击事件没问题,so,搜到一个方法解决了这个问题.uibutton分类symbian2+ios ...

  8. 在chrome下-webkit-box布局的一个bug

    chrome,也就是webkit内核下作的检测, chrome版本是40, -webkit-box这种布局在移动端用的比较多,主要是因为pc端的浏览器内核参差不齐. 因为在写HTML的时候看上了-we ...

  9. 关于MySQL count(distinct) 逻辑的一个bug【转】

    本文来自:http://dinglin.iteye.com/blog/1976026#comments 背景 客户报告了一个count(distinct)语句返回结果错误,实际结果存在值,但是用cou ...

随机推荐

  1. 聊聊Python中的描述符

    描述符是实现描述符协议方法的Python对象,当将其作为其他对象的属性进行访问时,该描述符使您能够创建具有特殊行为的对象. 通常,描述符是具有“绑定行为”的对象属性,其属性访问已被描述符协议中的方法所 ...

  2. Echarts大数据可视化物流航向省份流向迁徙动态图，开发全解+完美参数注释

    最近在研究Echarts的相关案例,毕竟现在大数据比较流行,比较了D3.js.superset等相关的图表插件,还是觉得echarts更简单上手些. 本文是以原生JS为基础,如果使用Vue.js的话, ...

  3. 手写vue observe数据劫持

    实现代码: class Vue { constructor(options) { //缓存参数 this.$options = options; //需要监听的数据 this.$data = opti ...

  4. 我是如何一步步裹挟老板从.net 转到 java 阵营的

    我是如何一步步裹挟老板从.net 转到 java 阵营的 仅记录从 .net(C#) 转到 java 的一些心路历程 时间点跨度 2016 — 2017 一.前 xx 公司同事群的一次聊天 前公司同事 ...

  5. Hexo + Serverless Framework，简单三步搭建你的个人博客

    很多人都想拥有自己的个人博客,还得看起来漂亮.酷酷的.尤其对开发者来说,不仅可以分享技术(装)心得(逼),面试的时候还能成为加分.这里介绍两款好用的神器,不用忙前(前端)忙后(后端),简单3min即可 ...

  6. 【转】python中查询某个函数的使用方法

    使用help(),例查询sum函数的用法 使用官方文档: 1)打开python的IDLE: 2)点击help,选择python doc(这是python的官方文档,或者你也可以直接按f1键) 3)在调 ...

  7. 【转】C#虚方法virtual详解

    转:https://www.cnblogs.com/zhaoshujie/p/10502404.html 在C++.Java等众多OOP语言里都可以看到virtual的身影,而C#作为一个完全面向对象 ...

  8. MySQL数据库(三)

    前提要述:参考书籍<MySQL必知必会> 2.1 MySQL简介 2.1.1 什么是MySQL MySQL是一种关系数据库管理系统.负责数据库中数据的存储,检索,管理和处理. 2.1.2 ...

  9. HashMap 源码赏析 JDK8

    一.简介 HashMap源码看过无数遍了,但是总是忘,好记性不如烂笔头. 本文HashMap源码基于JDK8. 文章将全面介绍HashMap的源码及HashMap存在的诸多问题. 开局一张图,先来看看 ...

  10. C#实现文件Move操作和文件的Copy操作

    文件移动(Move)操作和文件的复制(Copy)是C#程式开发经常遇到的方法,根据传入的源文件地址和目标文件地址参数,实现对文件的操作.实现代码如下: Move操作代码: public static ...