当前位置:网站首页>搜索框和按钮缩放时会有缝隙的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%效果图:

175%效果图

原网站

版权声明
本文为[崽崽的谷雨]所创,转载请带上原文链接,感谢
https://blog.csdn.net/weixin_44058725/article/details/125542765