关于inline-block高度带来的bug及解决方案

最新推荐文章于 2023-08-23 14:43:15 发布

a-slow-sparrow

最新推荐文章于 2023-08-23 14:43:15 发布

阅读量1.4k

点赞数 3

文章标签：前端 css vue

本文链接：https://blog.csdn.net/qq_25650505/article/details/121575391

版权

本文记录了一位开发者在处理input标签隐藏时遇到的难题。当使用v-show或v-if并试图通过CSS隐藏input，却发现无法消除其占用的空间。经过排查，问题出在行内盒模型上。解决方案包括修改display属性或调整父元素的font-size。这一问题涉及前端开发中的CSS样式和盒模型理解。

摘要由CSDN通过智能技术生成

前言

今天在开发当中偶然遇到一个问题，如下图，这里引入一个 input标签，利用input的focus来实现时间线的定位。
在 v-show 和 v-if 为 false 时不能正常的调用focus方法来实现时间线的定位，所有要通过css样式来将input标签从页面内“隐藏”，同时不能通过display:none的方式来实现
于是就尝试，将input的宽高内外边距设置为0，于是问题就出现了。。。下图中红框位置的高度莫名其妙被撑开了。

在这里插入图片描述

寻找问题的根源

1. input标签默认样式中的影响因素

在排除掉了宽、高、内外边距的影响之后，又分别做了如下尝试：

line-height为0
outline为0
border为none
font-size为0

经过以上尝试后，问题并没有得到解决，莫名多出来的高度依然顽固的存在。

2. 排除elementUI对input标签的影响

为了排除，是不是elementUI对input的样式有什么影响，于是新建了一个html文件，开始了我的尝试。
代码如下：

<div class="my-div">
    <input type="text"><div class="my-child">
    </div>
</div>

.my-div{
	height: 800px;
	width: 800px;
   	background-color: cadetblue;
 }
.my-child{
   	height: 600px;
   	width: 600px;
   	background-color: pink;
 }
input{
 	height: 0;
    width: 0;
    border: none;
    line-height: 0;
    outline: none;
    font-size: 0;
}

依然没有起到效果，这个时候心态已经有点小崩了。。。
在这里插入图片描述
图片红框中的白块就是input高度依然存在的证明。