问题描述：
做一个类似于 百度的搜索框时，浏览器 100% 没什么问题，但是缩放到175% 时按钮和input会出现缝隙。
100%效果图
175%效果图
如上图：明显能看出 有空白的缝隙
产生这个的原因是：当缩放到175%时，应该1.75格代表1像素，但由于硬件层次限制，比如一格用四个物理像素点绘制，0.25格就不绘制，故1.75格中的0.75，只能用三格绘制，未绘制的一格产生了空隙（css 页面缩放边框产生空隙相关）
如果是 按钮和 input 之间有缝隙 且对不齐 可以参考：input输入框和button确定按钮之间的默认间距问题
代码如下:
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="search">
<input type="search" name="" id="" placeholder="搜索" />
<button>搜索</button>
</div>
<style type="text/css">
.search {
position: absolute;
top: 25px;
left: 346px;
width: 534px;
height: 32px;
border: 2px solid #b1191a;
}
.search input {
float: left;
padding-left: 10px;
width: 454px;
height: 32px;
vertical-align: middle;
border: none;
outline: none;
}
.search button {
float: left;
width: 80px;
height: 32px;
background-color: #b1191a;
color: #f8f7f7;
border: none;
}
</style>
</body>
</html>解决方案：
其实这类问题一般是不用解决的。非要解决就可以用下面的方法
1.可以给 button 加一个 outline:1px solid xxx ;
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="search">
<input type="search" name="" id="" placeholder="搜索" />
<button>搜索</button>
</div>
<style type="text/css">
.search {
position: absolute;
top: 25px;
left: 346px;
width: 534px;
height: 32px;
border: 2px solid #b1191a;
}
.search input {
float: left;
padding-left: 10px;
width: 454px;
height: 32px;
vertical-align: middle;
border: none;
outline: none;
}
.search button {
float: left;
width: 80px;
height: 32px;
background-color: #b1191a;
color: #f8f7f7;
border: none;
outline: solid 1px #b1191a;
}
</style>
</body>
</html>100%效果图：
175%效果图
