火狐的一个bug
发现这个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的更多相关文章
- Tomcat一个BUG造成CLOSE_WAIT
之前应该提过,我们线上架构整体重新架设了,应用层面使用的是Spring Boot,前段日子因为一些第三方的原因,略有些匆忙的提前开始线上的内测了.然后运维发现了个问题,服务器的HTTPS端口有大量的C ...
- MySQL关于exists的一个bug
今天碰到一个很奇怪的问题,关于exists的, 第一个语句如下: SELECT ) FROM APPLY t WHERE EXISTS ( SELECT r.APPLY_ID FROM RECORD ...
- 由一个bug引发的SQLite缓存一致性探索
问题 我们在生产环境中使用SQLite时中发现建表报“table xxx already exists”错误,但DB文件中并没有该表.后面才发现这个是SQLite在实现过程中的一个bug,而这个bug ...
- Win10系统菜单打不开问题的解决，难道是Win10的一个Bug ?
Win10左下角菜单打不开,好痛苦,点击右下角的时间也没反应,各种不爽,折磨了我好几天,重装又不忍心,实在费劲,一堆开发环境要安装,上网找了很多方法都不适用.今天偶然解决了,仔细想了下,难道是Win1 ...
- 你可能不知道的 NaN 以及 underscore 1.8.3 _.isNaN 的一个 BUG
这篇文章并不在我的 underscore 源码解读计划中,直到 @pod4g 同学回复了我的 issue(详见 https://github.com/hanzichi/underscore-analy ...
- 标准模板库(STL)的一个 bug
今天敲代码的时候遇到 STL 的一个 bug,与 C++ 的类中的 const 成员变量有关.什么,明明提供了默认的构造函数和复制构造函数,竟然还要类提供赋值运算符重载.怎么会这样? 测试代码 Tes ...
- 是uibutton跟tableviewcell同步使用一个bug
这个问题是uibutton跟tableviewcell同步使用一个bug,不关delay一点毛事,证据就是点击事件没问题,so,搜到一个方法解决了这个问题.uibutton分类symbian2+ios ...
- 在chrome下-webkit-box布局的一个bug
chrome,也就是webkit内核下作的检测, chrome版本是40, -webkit-box这种布局在移动端用的比较多,主要是因为pc端的浏览器内核参差不齐. 因为在写HTML的时候看上了-we ...
- 关于MySQL count(distinct) 逻辑的一个bug【转】
本文来自:http://dinglin.iteye.com/blog/1976026#comments 背景 客户报告了一个count(distinct)语句返回结果错误,实际结果存在值,但是用cou ...
随机推荐
- react 报红错误汇总
react 报红错误汇总 一.Uncaught TypeError: Cannot read property 'value' of undefined 未知类型错:无法读取未定义的属性“value ...
- HDU2089 不要62 题解 数位DP
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2089 题目大意:求区间 \([l,r]\) 范围内不包含数字"4"且不包含连续的数 ...
- 「USACO08JAN」电话线Telephone Lines 解题报告
题面 大意:在加权无向图上求出一条从 \(1\) 号结点到 \(N\) 号结点的路径,使路径上第 \(K + 1\) 大的边权尽量小. 思路: 由于我们只能直接求最短路,不能记录过程中的具体的边--那 ...
- （httpd、php）
(一)http协议介绍 http: 超文本传输协议,http协议是应用层协议,实现http协议的软件都监听的TCP的80端口之上.http协议也是一种文本协议,是基于TCP协议实现 http协议有几个 ...
- 记录我的 python 学习历程-Day12 生成器/推导式/内置函数Ⅰ
一.生成器 初识生成器 生成器的本质就是迭代器,在python社区中,大多数时候都把迭代器和生成器是做同一个概念. 唯一的不同就是: 迭代器都是Python给你提供的已经写好的工具或者通过数据转化得来 ...
- 【转】在Ubuntu下建立Eclipse的Android开发环境
本文将介绍如何建立Ubuntu下基于Eclipse的Android开发环境的方法. 大部分的Android开发者都是使用Eclipse来开发Android,本文将向各位介绍一下建立Ubuntu下基于E ...
- Java 第一次课堂测验
周一下午进行了开学来java第一次课堂测验,在课堂上我只完成了其中一部分,现代码修改如下: 先定义 ScoreInformation 类记录学生信息: /** * 信1805-1 * 胡一鸣 * 20 ...
- 通过模拟Mybatis动态代理生成Mapper代理类，讲解Mybatis核心原理
本文将通过模拟Mybatis动态代理生成Mapper代理类,讲解Mybatis原理 1.平常我们是如何使用Mapper的 先写一个简单的UserMapper,它包含一个全表查询的方法,代码如下 pub ...
- 一文读懂MapReduce 附流量解析实例
1.MapReduce是什么 Hadoop MapReduce是一个软件框架,基于该框架能够容易地编写应用程序,这些应用程序能够运行在由上千个商用机器组成的大集群上,并以一种可靠的,具有容错能力的方式 ...
- 程序员Java架构师多线程面试题和回答解析
当我们在Java架构师面试的过程中常见的多线程和并发方面的问题肯定是必不可少的一部分.那么在面试之前我们更应该多准备一些关于多线程方面的问题. 面试官只是想确信面试者有足够的Java线程与并发方面的知 ...