当前位置：网站首页>There will be a gap bug when the search box and button are zoomed

There will be a gap bug when the search box and button are zoomed

2022-07-01 15:55:00 【Xiaozai's Guyu】

Problem description ：

Make a similar Baidu's search box , browser 100% No problem , But zoom to 175% Time button and input There will be gaps .

100% design sketch

design sketch 100%

175% design sketch

175%

Pictured above ： It is obvious that There are gaps

The reason for this is ： When retracted to 175% when , should 1.75 Lattice representative 1 Pixels , However, due to the limitation of hardware level , For example, a grid is drawn with four physical pixels ,0.25 The grid does not draw , so 1.75 Lattice 0.75, Only three squares can be used to draw , An unpainted grid creates a gap （css The page scaling border produces gap Correlation ）

If it is Button and input There is a gap between them And not aligned You can refer to ：input Input box and button Determine the default spacing between buttons

The code is as follows :

<html>

<head>
  <meta charset="utf-8" />
  <title></title>
</head>

<body>
  <div class="search">
    <input type="search" name="" id="" placeholder=" Search for " />
    <button> Search for </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>

Solution ：

1. You can give button Add one more outline:1px solid xxx ;

<html>

<head>
  <meta charset="utf-8" />
  <title></title>
</head>

<body>
  <div class="search">
    <input type="search" name="" id="" placeholder=" Search for " />
    <button> Search for </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% design sketch ：