当前位置:网站首页>搜索框和按钮缩放时会有缝隙的bug
搜索框和按钮缩放时会有缝隙的bug
2022-07-01 15:42:00 【崽崽的谷雨】
问题描述:
做一个类似于 百度的搜索框时,浏览器 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%效果图
边栏推荐
- Samsung took the lead in putting 3nm chips into production, and Shanghai's fresh master students can settle directly. Nankai has established a chip science center. Today, more big news is here
- [Cloudera][ImpalaJDBCDriver](500164)Error initialized or created transport for authentication
- Deep operator overloading (2)
- [300 + selected interview questions from big companies continued to share] big data operation and maintenance sharp knife interview question column (III)
- Rhcsa fourth day operation
- Photoshop插件-HDR(二)-脚本开发-PS插件
- Returning to the top of the list, the ID is still weak
- What is the forkjoin framework in the concurrent programming series?
- The latest NLP game practice summary!
- The last picture is seamlessly connected with the first picture in the swiper rotation picture
猜你喜欢
《QT+PCL第九章》点云重建系列2
Don't ask me again why MySQL hasn't left the index? For these reasons, I'll tell you all
马来西亚《星报》:在WTO MC12 孙宇晨仍在坚持数字经济梦想
华为发布HCSP-Solution-5G Security人才认证,助力5G安全人才生态建设
[stm32-usb-msc problem help] stm32f411ceu6 (Weact) +w25q64+usb-msc flash uses SPI2 to read out only 520kb
一次革命、两股力量、三大环节:《工业能效提升行动计划》背后的“减碳”路线图...
Zero copy technology of MySQL
【300+精选大厂面试题持续分享】大数据运维尖刀面试题专栏(三)
Tanabata confession introduction: teach you to use your own profession to say love words, the success rate is 100%, I can only help you here ~ (programmer Series)
张驰咨询:家电企业用六西格玛项目减少客户非合理退货案例
随机推荐
Wechat applet 03 - text is displayed from left to right, and the block elements in the line are centered
Create employee data in SAP s/4hana by importing CSV
Research on manually triggering automatic decision of SAP CRM organization model with ABAP code
三星率先投产3nm芯片,上海应届硕士生可直接落户,南开成立芯片科学中心,今日更多大新闻在此...
Survey of intrusion detection systems:techniques, datasets and challenges
Hardware design guide for s32k1xx microcontroller
张驰课堂:六西格玛数据的几种类型与区别
Pnas: brain and behavior changes of social anxiety patients with empathic embarrassment
[Cloudera][ImpalaJDBCDriver](500164)Error initialized or created transport for authentication
微服务追踪SQL(支持Isto管控下的gorm查询追踪)
Pico,能否拯救消费级VR?
Go zero actual combat demo (I)
Redis秒杀demo
STM32F1与STM32CubeIDE编程实例-PWM驱动蜂鸣器生产旋律
[target tracking] | template update time context information (updatenet) "learning the model update for Siamese trackers"
Stm32f411 SPI2 output error, pb15 has no pulse debugging record [finally, pb15 and pb14 were found to be short circuited]
Automatic, intelligent and visual! Deeply convinced of the eight designs behind sslo scheme
Using swiper to make mobile phone rotation map
自動、智能、可視!深信服SSLO方案背後的八大設計
#夏日挑战赛# HarmonyOS canvas实现时钟