display:inline-block的BUG处理

最新推荐文章于 2021-10-11 11:29:28 发布
最新推荐文章于 2021-10-11 11:29:28 发布
阅读量221 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37547964/article/details/109569097
版权

display:inline-block的BUG

display:inline-block；会默认把文字间的空格和换行进行处理，导致元素俩边有边距，通过删除代码之间的空格或者换行又不美观。

解决方案：给父元素设置font-size：0；然后在给子元素上单独设置元素大小即可解决。

前端J先生
关注
专栏目录
display inline-block 布局 html,基于inline-block进行自适应列表布局
weixin_35003319的博客
06-21 1030
需求无论是电商网站展示商品列表还是个人博客展示文章列表，或者是社交站点展示好友列表，往往会遇到自适应列表布局的需求，本文介绍一种使用inline-block布局的方法。block,inline和inlinke-block细节对比● display:blocka. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。b. block元素可以...
html间隔横排之间的距离,display:inline-block下，元素不能在同一水平线及元素间无margin间距的问题解决方法...
weixin_28025327的博客
06-07 688
在前端页面地开级还思层似未屏别。域一插式近址发应是编辑中，常常用于块元素横排列时，我们会用到浮动或者dispaly：inline-blo分浏代刚的学过互解久点维数数请曾房总题屏断果如以气。泉公一实切式时带近享览码开时会进。,后，护据一求相ck；浮动虽然好几后来含些在到气时按式近篇来又的方浏消风用，效果明显，但是会存在潜在BUG，(暂且不论)；那么display：inline-block也能使其横排...
使用display: inline-block的一些bug
六羽的博客
10-21 321
最近发现对于一些元素使用display：inline-block的时候，元素底下和右边会多出一些空白区域来占位置，如下图。由于项目时间紧张，临时换了其他处理方式，趁着今天有点时间就研究了一下。 <div class="box"> <span class="item red"></span> <span class="item red">&...
display:inline-block的几个应用及bug
cdefg198的专栏
11-16 905
和大家一样经常使用display:inline和display:block来进行块元素(block element)和内联元素(inline element，也叫行内元素)之间的转换。 块元素和内联元素的主要区别： 1.块元素会自动在末尾加一个换行，而内联元素不会，多个内联元素会自动排成一行，比如img标签或span标签插到一行文字中，他会和这行文字自动排成一行，而如果你在这行文字中插入一个块
解决inline-block元素的 bug
距离的博客
08-30 740
在使用inline-block时，有时候出现的效果莫名奇妙，例如： * 两个inline-block 元素之间如果有空格、回车、tab，那么在页面上就有一个空隙 * 两个不同高度的 inline-block 元素顶部无法对齐，或者使用inline-block下面无缘无故多出几像素 例子1,出现空隙<!DOCTYPE html> <html><head> <meta charset="
解决IE6,7下display:inline-block;失效问题。
yangjidaimin的专栏
03-11 521
div {     display: inline-block;     *zoom: 1;     *display: inline; } IE6能识别*，但不能识别 !important,  IE7能识别*，也能识别!important;  FF不能识别*，但能识别!important;
display:inline-block解决文字有间隙问题
wyw223的博客
11-21 247
定义：display:inline-block是使元素以块级元素的形式呈现在行内。意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内联元素的增强。 但是display:inline-block存在文字间隙问题 &lt;div class="container"&gt; &lt;div class="left"&gt; 左 &l...
display:inline-block的原理分析
09-25
首先，`display:inline-block` 的基本原理是将一个元素呈现为内联元素，但其内容按照块级元素的方式处理。这意味着元素不会强制换行，可以与其他内联元素并排显示，同时能设置宽高并保留内联间距。然而，并非所有...
CSS教程：inline-block在各浏览器的显示
09-27
本文主要探讨的是`display: inline-block`这个声明，它在不同浏览器中的行为和兼容性问题。`inline-block`允许元素既保持内联元素的特性（如文本在同一行显示），又可以具有块级元素的特性（如设置宽高）。然而，...
让IE6/IE7支持display:inline-block属性的两种方法
01-19
在IE6和IE7中这个版本的IE流量器中，对display:inline-block属性支持不佳，这也是一个经典的BUG。 有两种方式解决这个问题，让IE6/IE7 支持 display:inline-block 的方法。 复制代码代码如下:<ul> <li></li> <li></...
解决在使用display:inline-block时，在同一行的块级元素之间有空格的bug
m0_46544453的博客
10-11 221
bug如图： 解决方法一：在书写代码的时候，把两个块级元素放在同一行 解决方法二：使用跨行的注释 解决方法三：设置margin-left为负值，可以但没必要 解决方法四：给父元素添加font-size:0（也麻烦，得重新设置子容器字体大小，也就是相当于把字体刷新了一下） 解决方案五：给父元素添加letter-spacing 为负值 ...
display常用属性及inline元素之间的空白和padding的问题
zyl_lyr1019的专栏
11-07 3804
本文主要对display 的几种最常用的方法进行了分析，分别为none，block，inline-block，inline，inherit。 其中主要分析了inline时，两个连续行内元素之间出现空白，以及行内元素占据空间等问题。 W3C规定： display 属性规定元素应该生成的框的类型。 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 d
display:inline-block属性的标签出现的问题及解决方法
热门推荐
奋斗小强的博客
07-24 1万+
1，首先说明display:inline-block可以让块级元素并排显示，但是需要注意一些问题，如下； 1、有些标签是默认的inline-block属性，例如img 和input，这些标签称为行内块标签 1.对于img标签会出现白边问题，如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta ch...
关于IE7的display:inline-block失效问题
soos的博客
06-14 1009
有时候我们必须要有display：inline-block;属性，但是IE7并不支持，这是开发过程中经常会遇到的问题，下面特意记录一下以便后期使用： 解决IE7不支持display：inline-block问题： .selector{ display:inline-block; *display:inline; *zoom:1; } 注意：zoom:1是必须的。
CSS之使用display:inline-block来布局
糖长老莫小贝的博客
09-21 530
本文转载于https://www.cnblogs.com/Ry-yuan/p/6848197.html 感谢博主分享 1.解释一下display的几个常用的属性值，inline ， block， inline-block inline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是t.
使用display: inline-block;遇到的问题及解决
weixin_30558305的博客
12-10 523
1、使用display: inline-block;布局div会使两个字div中间产生间隙，解决办法有多种: ①可以不换行的将两个div书写在一行，因为换行也会占dom文档流。 ②可以在父元素中加上font-size: 0;也能消除中间间隙。 2、有些时候两个使用display:inline-block;的两个子元素可能会出现上下错位的情况，也就是没有上上部对齐，发生这种问题的原因是inli...
CSS:IE6/Ie7 display:inline-block 不起作用
把项目开发中遇到的问题记录下来
09-28 1965
在 IE6、IE7中不识别display:inline-block属性，但使用inline-block属性在IE下会触发layout，从而使内联元素 拥有了display:inline-block属性的表症。从上面的分析也不难理解为什么IE6、IE7下对块元素设置display:inline- block属性无法实现inline-block的效果。这时块元素仅仅是被inline-block触发了l...
通俗易懂讲解为什么设计稿都是750px！！！
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
10-11 5469
相信很多做前端的有时候很好奇为什么设计稿都是750px，查了好多资料也懵懵懂懂的，我也是这样的，经过自己查阅文档，我将自己理解的告诉大家，不妥之处请大神指出，将十分感谢！！！ 第一点：手机像素 手机像素是逻辑像素也就是pt，1pt等于2px 第二点：物理像素 设计稿普遍给的都是物理像素，也就是px 第三点：为什么不给pt像素呢 因为css像素普遍使用率最高就是px像素，苹果手机屏幕为二倍高清屏，显示更为清晰 第四点：为什么没有比750还大的设计稿呢 因为人类的视觉分辨最大就是750，给在大的设计稿在手机上你
深入解析inline-block属性历史与实战技巧
当使用`display:inline-block`时，元素之间可能会出现水平空隙，这并非真正的bug，而是由于浏览器对于`inline`元素和`block`元素间默认的行内间距处理不同。解决这个问题的方法通常涉及调整外边距、负margin或者使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端J先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值