span嵌套内容留有3px空隙解决方法

最新推荐文章于 2023-07-03 15:20:50 发布
最新推荐文章于 2023-07-03 15:20:50 发布
阅读量3k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： UI 文章标签： class scroll border url css ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/spring21st/article/details/5881365
本文介绍了在实现五星图书榜星级比例时遇到的一个CSS问题，即在IE6下，span元素间的3px空隙导致布局不正确。问题源于IE6中span元素默认存在高度。解决方案是通过添加`font-size:0px; line-height:0px; overflow:hidden;`到外层span的样式，以此消除空隙。修改后的CSS代码使得星级比例显示在所有浏览器中保持一致。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

实现五星图书榜星级比例，效果如下：

 

 

 

HTML结构：

最低0.47元/天 解锁文章
女朋友要我教她CSS，我就写了这一篇长文，感动哭了？
超逸の学习技术博客
05-30 9890
女朋友她又要我教她CSS，这4w字长文够了吗？她会被感动到吗？
【前端之旅】CSS三万字总结
请你喝杯Java
11-16 2790
一名软件工程专业学生的前端之旅，记录自己对三件套（HTML、CSS、JavaScript）、Jquery、Node.js、Vue、axios、小程序开发（uniapp）以及各种UI组件库、前端框架的学习。 【前端之旅】Web基础与开发工具 【前端之旅】HTML 大总结 CSS 三万字总结一、CSS简介1、什么是CSS2、CSS的好处及作用3、CSS的初体验二、基本用法1、CSS语法模板2、CSS引用方式2.1 行内样式2.2 内部样式2.3 外部样式2.4 引入方式总结3、选择器3.1 标签选择器3.2 .
嵌套span间隙问题
weixin_30933531的博客
05-15 112
父元素添加 font-size:0px; line-height:0px; overflow:hidden; 转载于:https://www.cnblogs.com/lweiruil/p/4505099.html
图片上下排列3px间隔的消除方法
ChoiceK的博客
09-03 2403
在布局中，图片上下排列会出现3px的间隔，如下图 消除方法： 1、给居上的img图片添加样式 vertical-align：top; 2、给居上的img图片添加样式 第二种：display：block;将其转为块级元素 推荐使用第一种方法，因为第二种是将行内元素转为块级元素，需要占据父容器的100%的宽度影响布局。 以下是对vertical-align属性的补充（通过查阅
块级元素包含行内元素（img、span等）底部多出3px间隔的解决办法
duguxueao的专栏
09-22 389
html: <div class="logo_left"><!--div的高度是83px--> <img src="images/logo.jpg"/><!--图片的高度是80px--> </div> 解决： 1.那么，为什么div的高度会比img的高度多3px呢？ 　　这是因为，行内元素后面会跟一个空白符，会使它的高度多出3px。 2.怎么解决？ 　　我在查阅验证之后总结了4种方案： 　　1. 设置div{ fon
<span>标签挨着写时的出现的迷之间距问题
TheBadWaka的博客
01-21 2853
问题两个span分行挨着写时，样式会出现迷之间隔，如下： 解决方案1：父元素的font-size设置为0，但是这样会出现一个问题，text-overflow: ellipsis属性不在生效解决方案2：html中将span不分行挨着写，如下图：这样既可以消除间隔，又可以保留text-overflow: ellipsis属性
div 或 span 的高度比 img 的高度要多3px。如何解决？
bug收集
12-19 619
问题： 如果将一个 img 放在 div 或 span 里面，你会发现在img下面无端端的就多出3px的空白出来。padding、margin、border都设为0，无效！那么怎么解决这个问题呢？ 代码： <div class="pic"> <img src="/images/1.jpg"/> </div> <span> <img src="/images/2.jpg"/> </span> 原因： 异步更新队列
CSS第五章 CSS盒子模型/标签分类和嵌套规范
晓葉斑比
05-18 1359
CSS五、CSS盒子模型5.1 标准盒子模型5.2 box-sizing样式5.3 盒子模型的一些问题1. margin叠加问题2. margin传递问题扩展 五、CSS盒子模型 5.1 标准盒子模型 组成 : content -> padding -> border -> margin            物品     &
浏览器兼容性问题及解决方案大汇总
最新发布
qq_51179053的博客
07-03 3479
所谓浏览器兼容性问题：是指不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的效果。解决方法前端开发疆场需要检查浏览器的兼容性，这里推荐（Can I Use）这个查询网址。是一个针对前端开发人员制定的一个查询CSS、JS、HTML5、SVG，可以很好的保证网页在浏览器中的兼容性。CSS兼容问题1、不同浏览器的标签默认的内外边框不同。解决方案 {margin:0;padding:0}/** * 该文件用于清除浏览器样式 */ html, body, div, span, applet, objec
多个span标签在同行展示不对齐问题
lucasxt的博客
03-10 959
检查发现存在空标签导致 span:empty { display: none; }
两个span在一行却高低不一致
weixin_43859703的博客
05-17 2541
给第一个span加了超出部分呢省略号以后，两个span虽然还在一个div中，但是居然不同高了！！一个靠上一个靠下一些，我试了各种css居中的方式也没能让两个span同高； 研究了很久发现是overflow：hidden以及不折行影响的，最后解决办法是使用flex布局，两个span就恢复正常了，万能的flex啊！！！ .textTop{ width: 100%; display:...
span标签在ios中错位 span标签位置下移异常
qq_39855581的博客
03-31 1264
场景：span标签在ios中出现错位，往下移了一部分. 安卓以及pc模拟均是正常的。 解决方案：加上vertical-align: top;即可
span标签的使用场景
奶厂小程的博客
03-01 6069
span标签的使用笔记，如何使用span标签的场景
html语言span标签,html 中span标签里面都能放那些标签？？
qq_27009517的博客
07-09 7470
基本上都可以放只是样式调整起来比较头疼。所以一般只是做标记用。不用再在它的里面放标签了 在SEO中span标签代表搜索引擎不抓取的内容。 span属于内联元素，默认宽度为当前文本长度宽度。 所以当span中包含一些块级标签时就会无效果。 如： <span><h1></h1></span> 浏览器会解析为： <span></span> <h1></h1> 默认的span标签是一个行内标签，页面构成时，尽
10、标签的嵌套和标签嵌套的意义
山兔的博客
01-03 2015
标签的嵌套 一个标签可以嵌套（包含）其他标签 div标签嵌套span标签，建议写成三行，会比较好看 下面的嵌套写法是错误的，不符合HTML语法 因为它们相互嵌套，这明显是错误的 因为br标签是单标签，不存在结束标签，这应该写成两个独立的标签 编写一个HTML中不存在的标签，会发生什么事？ 也是可以正常显示的 注意 有语法错误的HTML代码，还是可以被浏览器识别显示出来 建议：还是要严格按照HTML语法去编写代码，才能保证最终显示出来的效果是正确的 虽然浏览器的容错能力比较强，但有时候还是会显示出一些
在html中div如何嵌套span,div里套span，span里套a，a里套img，span里的文字部分，怎么实现垂直居中？请见图...
weixin_31360095的博客
06-20 1603
html和css代码如下：Powered by: 实际上，之前的代码中，a标签是没有嵌套在span中的，而是与span同级，如下：Powered by: 后来在网上看到有人说将a标签放在span中应该就可以了。不过，两者试了之后，反正死活无法实现垂直居中。补充：回答中有朋友说在span里的line-height等于图片高度的情况下...
<a>标签里套<span>标签使hover对span内容
qq_39145218的博客
08-15 7731
错误代码：css: #label span {   color:#696969; } .brief{       text-decoration: none; } .brief:hover span{     color:orange; } html:（iconfont是小图标，希望hover使图标和文字均变色） &lt;div id="label"&gt;               ...
span 标签内部有空隙怎么解决
06-08
如果你在 span 标签内部发现了一些空隙，这可能是由于标签之间的空格或换行符造成的。这些空格和换行符会被视为文本内容，因此在渲染时会显示出来。 为了解决这个问题，你可以使用以下方法之一： 1. 删除标签之间的空格和换行符： ```html <span>这是一个<span>没有</span>空隙的<span>文本</span></span> ``` 2. 设置 span 标签的字体大小为 0，然后再在内部的子元素中设置字体大小： ```html <span style="font-size: 0;"> <span style="font-size: 16px;">这是一个</span> <span style="font-size: 16px;">没有</span> <span style="font-size: 16px;">空隙的</span> <span style="font-size: 16px;">文本</span> </span> ``` 这样可以让 span 标签内部的空格和换行符不可见。注意，在内部子元素中设置字体大小时，要将其恢复为正常大小，否则子元素的文本内容会变得非常小。 希望这些方法能够解决你的问题！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值