当前位置：网站首页>搜索框和按钮缩放时会有缝隙的bug

搜索框和按钮缩放时会有缝隙的bug

2022-07-01 15:42:00 【崽崽的谷雨】

问题描述：

做一个类似于百度的搜索框时，浏览器 100% 没什么问题，但是缩放到175% 时按钮和input会出现缝隙。

100%效果图

效果图 100%

175%效果图

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%效果图：