使用inline-block后，高度出现Bug

最新推荐文章于 2021-11-27 14:24:03 发布
最新推荐文章于 2021-11-27 14:24:03 发布
阅读量1.1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42209411/article/details/84773470
版权

在做一个小demo时候，出现虽然已经设置了height为44px；但是在浏览器上高度明显不对，经过查阅知道是inline-block元素存在的bug导致。这篇文章对于这个问题给出了很多解决办法：https://segmentfault.com/a/1190000010934928

我的bug:

解决办法：

 

我爱吃方方面
关注
inline-block引发的高度问题
NaSaga的博客
03-15 1018
inline-block引发的高度问题 当div为块block时，空内容，则完全没有宽高 当div为inline-block时 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>问题记录</title> <style> * {margin:0; padding:0; border:0;} p {background:#9CF;} .c
display inline-block 布局 html,基于inline-block进行自适应列表布局
weixin_35003319的博客
06-21 1058
需求无论是电商网站展示商品列表还是个人博客展示文章列表，或者是社交站点展示好友列表，往往会遇到自适应列表布局的需求，本文介绍一种使用inline-block布局的方法。block,inline和inlinke-block细节对比● display:blocka. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。b. block元素可以...
inline-block容器的高度撑开位置
weixin_34150503的博客
11-26 335
block的高度是从最上面撑开的 那么inline-block呢？ 直接上代码 <!doctype html> <html> <head> <meta charset="utf-8"> <style> #test { line-height: 0; font-size: 80...
inline-block元素高度为0，父级仍被撑起，问题元凶—strut
userkang的博客
03-29 2045
背景 最近遇到一个问题，在 div 元素下插入一个 iframe 元素，宽、高、边框都设置为0了，但 div 还是被撑起了一个高度。 <div style="background: orangered;"> <iframe src="/" style="width: 0; height: 0;" frameborder="0"></iframe> &...
关于inline-block高度带来的bug及解决方案
qq_25650505的博客
11-27 1505
目录前言寻找问题的根源1. input标签默认样式中的影响因素2. 排除elementUI对input标签的影响解决方法 前言 今天在开发当中偶然遇到一个问题，如下图，这里引入一个 input标签，利用input的focus来实现时间线的定位。 在 v-show 和 v-if 为 false 时不能正常的调用focus方法来实现时间线的定位，所有要通过css样式来将input标签从页面内“隐藏”，同时不能通过display:none的方式来实现 于是就尝试，将input的宽 高 内外边距设置为0，于是问题
Inline-block没有内容时，仍有高度
u010552788的专栏
07-18 2392
如下图，第二个line-block的span没有内容，但是div的高度是120px demo: https://codepen.io/GitKou/pen/qNxNxj<div> <span class="a">111</span> <span class="b"></span> </div>div { font-size: 20px; line-height: 60px; b
Firefox Bug: inline/inline-block的间隙采用代码缩进可解决
09-25
在网页布局中，`inline-block` 是一种常用的CSS布局方式，它允许元素保持内联特性的同时，具有块级元素的宽度和高度可调整性。然而，`inline-block` 在不同浏览器间存在兼容性问题，特别是在Firefox中有一个知名的...
IE6中a标签同时使用inline-block与text-indent时出现的BUG
09-25
在本文中，我们将深入探讨一个特定的问题：在IE6中，当`<a>`标签同时使用`inline-block`和`text-indent`属性时出现的显示异常。 `inline-block`是一个CSS布局属性，它使元素表现得像内联元素，但同时允许设置宽度、...
display:inline-block的原理分析
09-25
这个属性结合了 `display:inline` 和 `display:block` 的特性，使得元素既能像内联元素一样在一行内排列，又能像块级元素一样拥有宽度、高度以及垂直方向的 margin 和 padding。这对于创建复杂的网页布局和响应式...
当li设置为inline-block之后元素之间空隙的产生原因和解决办法
weixin_44797199的博客
06-22 1066
当我们在使用ul>li标签写导航的时候，又不想让其变成浮动流，我们只需要把li的css样式添加一个display: inline-block就可以了。 但是当我们写完样式之后，本来应该是这样的。 实际情况却是这样的。 究其原因，我们在使用display:inline-block的时候，浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码&...
display:inline-block解决行元素没有办法设置宽高的问题
abcdefpm的博客
08-13 3112
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 (准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)
img元素设置了block，修改宽高无效
sinat_41736081的博客
05-07 2901
img不仅是行内元素还是替换元素 替换元素是指浏览器根据元素的标签和属性，来决定元素的具体显示内容（即不是直接把内容告诉浏览器，需要先读取属性和标签再显示）。替换元素是其内容不受CSS视觉格式化模型控制的元素，就是尺寸由内部元素决定。 如果要修改宽高就需要在其标签内部进行修改才会起作用。例如：<img src=" " style="display:block;width:414px...
关于height:100%的简单理解
lihuihui2016的博客
03-06 8151
要想高度百分比起作用，一般来说，要满足两个条件：其一，父标签有高度可寻，就是向上遍历父标签要找到一个定值高度（body，html另外讨论），如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用；其二，标签本身的属性，如果inline属性的标签，如果没有浮动，zoom，或是绝对定位之类属性是不支持百分比高度的，block或inline-block属性可以说是高度百分比...
inline-block
小白小白从不日别的博客
07-15 124
inline-block: 像文本一样排block元素 没有清除浮动等问题 需要处理间隙 示例： .container { width: 800px; height: 200px; /* 解决由于字体大小导致的间隙问题 方式1 */ font-size: 0; } .lef.
说说行内元素与块级元素以及之间的转换？
kingfaker的博客
12-12 803
块级元素与行内元素 块级元素会扩展到与元素同宽。行内元素会“收缩包裹” 其内容，并且会尽可能包紧。 （以上这两个总结，来自于《css设计指南》这本书） 其默认css样式 块级元素其高度为其内容高度，宽度会扩展到与父元素同宽。所以导致块级元素会独占一行，无法在其后容纳其他块级元素与行内元素。行内元素其高度为其内容高度，宽度会收缩包裹其内容。奇怪的一点：行内元素之间有一定的距离，使用控
解决用display:inline-block导致高度不一致问题
cooker_666的博客
11-30 5641
设置9宫格棋子的时候，通过给单独的square设置样式，原本是打算使用display;inline-block.来设计布局的。然后通过点击事件然后像square插入字体的时候发现了一旦插入，就会因为自动对齐字体底部导致高度变化。 .square{ display: inline-block; width: 80px; height: 80px; border: 1p...
css总结 -使用display：inline-block，出现元素高度错位
热门推荐
benben0729的专栏
08-30 1万+
在进行页面布局时发现一个问题,两个相同高度的元素显示高度不一致，发生错位。 &lt;style&gt; .left{ display:inline-block; height:110px; width:110px; } .right{ display:inline-block; height:110px; width:110px; } &lt;/style&gt; ...
css display:“inline-block“错位问题与css超出部分显示省略号
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
12-22 1666
222
深入解析inline-block属性历史与实战技巧
当使用`display:inline-block`时，元素之间可能会出现水平空隙，这并非真正的bug，而是由于浏览器对于`inline`元素和`block`元素间默认的行内间距处理不同。解决这个问题的方法通常涉及调整外边距、负margin或者使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值