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

最新推荐文章于 2024-05-25 22:16:51 发布
最新推荐文章于 2024-05-25 22:16:51 发布
阅读量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:

解决办法：

 

我爱吃方方面
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
inline-block引发的高度问题
NaSaga的博客
03-15 955
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
Firefox Bug: inline/inline-block的间隙采用代码缩进可解决
09-25
在网页布局中，`inline-block` 是一种常用的CSS布局方式，它允许元素保持内联特性的同时，具有块级元素的宽度和高度可调整性。然而，`inline-block` 在不同浏览器间存在兼容性问题，特别是在Firefox中有一个知名的...
inline-block容器的高度撑开位置
weixin_34150503的博客
11-26 315
block的高度是从最上面撑开的 那么inline-block呢？ 直接上代码 <!doctype html> <html> <head> <meta charset="utf-8"> <style> #test { line-height: 0; font-size: 80...
vue之封装上传组件、hover伪类变量样式、动态设置全局样式、自定义手势光标、组件双向绑定、鼠标指针样式、选择文件、自动上传、插槽传参、calc计算、v-model:a-b=“files“、emit
最新发布
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
05-25 941
vue之封装上传组件、hover伪类变量样式、动态设置全局样式、自定义手势光标、组件双向绑定、鼠标指针样式、选择文件、自动上传、插槽传参、calc计算、v-model:a-b=“files“、emit
inline-block元素高度为0，父级仍被撑起，问题元凶—strut
userkang的博客
03-29 1901
背景 最近遇到一个问题，在 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 1392
目录前言寻找问题的根源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 2339
如下图，第二个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
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。这对于创建复杂的网页布局和响应式...
CSS教程：inline-block在各浏览器的显示
09-27
`，可以让Firefox 2使用`-moz-inline-stack`，而其他支持`inline-block`的浏览器仍能正常工作。但这样做可能会引入一些小bug，例如元素之间的间距不一致。为解决此问题，可以将`<li>`内的内容包裹在`<div>`中，这样...
当li设置为inline-block之后元素之间空隙的产生原因和解决办法
weixin_44797199的博客
06-22 977
当我们在使用ul>li标签写导航的时候，又不想让其变成浮动流，我们只需要把li的css样式添加一个display: inline-block就可以了。 但是当我们写完样式之后，本来应该是这样的。 实际情况却是这样的。 究其原因，我们在使用display:inline-block的时候，浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码&...
display:inline-block解决行元素没有办法设置宽高的问题
abcdefpm的博客
08-13 3072
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 (准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)
CSS：inline-block的使用方法
ma125120的博客
07-23 1468
CSS：inline-block的使用方法 inline-block类型是在CSS2.1中追加的一个盒类型。目前为止，它受到了Safari浏览器、Opera浏览器、Chrome浏览器、Firefox浏览器以及IE8以上版本浏览器的支持。 inline-block属性的三种用法 块级元素的并排显示：在进行网站开发的过程中，经常使用float或position使得元素在一行内进行并排显示，这两种属性
inline-block 的使用
学习记录
06-03 247
做横向布局、排序，在过去很长的一段时间内都是使用 float ，但是使用 inline-block 会更简单。 因为IE6和IE7不支持inline-block，以前想使用inline-block，可是考虑到要做麻烦的兼容，就放弃了。 假如做移动设备的web，不考虑IE6和IE7，使用inline-block还是很方便的。 inline-block *{margin: 0; pad
解决用display:inline-block导致高度不一致问题
cooker_666的博客
11-30 5524
设置9宫格棋子的时候，通过给单独的square设置样式，原本是打算使用display;inline-block.来设计布局的。然后通过点击事件然后像square插入字体的时候发现了一旦插入，就会因为自动对齐字体底部导致高度变化。 .square{ display: inline-block; width: 80px; height: 80px; border: 1p...
nodejs基础教程-简单blog（5）-cookie保存用户登录状态
久如云漂泊
12-26 7019
用户登录—前端发送登录请求—后端保存用户 cookies—页面刷新 —前端判断用户id存在—显示登录状态—用户退出—前端发送退出请求–后端清空用户cookies—页面刷新—前端判断用户id不存在—-显示需要登录的界面当我们登录成功，在这个页面刷新，页面并没有保存登录状态；今天这节教程需要的效果就是。后台cookie保存用户登录状态。做到刷新页面仍然显示在用户登录界面；app.js 设置中间件var
CSS之使用display:inline-block来布局
糖长老莫小贝的博客
09-21 522
本文转载于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_30642561的博客
07-31 198
HTML的元素有多种display属性，比较常见的有display:none; display:block; display:inline和display:inline-block;等。详细可参阅W3Schools文档。有些HTML元素自然地带有display:block;样式属性，比如<div><h1>...<h6><p>...
想要div铺满全屏，设置height:100%却没有生效
weixin_44370837的博客
01-14 8436
为何height:100%无效 读书笔记之《CSS世界》 开发遇到的问题 某小白想要在页面插入一个div，然后满屏显示背景图，就写了如下的CSS： div { width: 100%; /*这是多余滴*/ height: 100%; /*这是无效滴*/ background: url(bg.jpg); } 然后他发现这个div的高度永远...
SqlDataReader result = BLL.AdminUser.login(username, password); while (result.Read()) { Session["a_id"] = result["a_id"]; Session["a_root"] = result["a_root"]; Session["username"] = result["a_username"]; Session["a_name"] = result["a_name"]; } if (result != null) { login_text.Style["display"] = "inline-block"; unlogin_text.Style["display"] = "none"; Label1.Text = username; Response.Redirect(Request.Url.ToString()); } else { Response.Write("<script>alert('账号或密码错误!')</script>"); } result.Close();此程序有个bug,密码错误时,不跳出alert,希望帮我解决
07-08
login_text.Style["display"] = "inline-block"; unlogin_text.Style["display"] = "none"; Label1.Text = username; Response.Redirect(Request.Url.ToString()); } else { Response.Write("<script>alert('...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值