本文探讨了在HTML和CSS中，当浏览器缩放时，搜索框内的输入框与按钮之间出现缝隙的问题。通过分析和展示四种不同的CSS解决方案，包括设置父元素背景色、使用浮动和定位等，解决了元素间因缩放产生的白线缝隙。
<div class="search1 por">
<input type="search" name="" id="" placeholder="搜索商家/地点" class="fl">
<!-- 用浮动，如果缩放页面，按钮会和父盒子边框产生缝隙 -->
<button class="fl">搜 索</button>
</div>
某比例缩放贴合
某比例缩放出现缝隙
单纯左或右浮动，浏览器缩放后元素之间贴合地方出现白边
四种不同属性设定的效果和兼容难易度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索框</title>
<link rel="stylesheet" href="../../base.css">
</head>
<body>
<style>
.search1 {
margin: 60px auto;
width: 500px;
height: 40px;
/* 父盒子设定边框作为搜索框 ，让里面两个子盒子浮动摆放*/
border: 2px solid #d2a95e;
/* 给父元素添加同边框一样的背景色填充，就可以消除缩放出现白边的现象，设置不同颜色缩放可以看到区别 */
/* background-color: #2207b6; */
}
.search1 input {
/* top: 0; */
/* left: 0; */
/* 如果单纯只用左（右）浮动、定位摆放子盒子，缩放的时候，子盒子之间、子盒子和父盒子之间，只要元素之间有尺寸有衔接，在某个缩放比例都会出现缝隙 ，而且浮动摆放有的缩放比例还会掉下来，定位因为可以层叠则不会掉下来*/
/* 给父元素添加同边框一样的背景色填充，就
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
