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

最新推荐文章于 2023-03-01 15:44:42 发布
原创 最新推荐文章于 2023-03-01 15:44:42 发布 · 3.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#class #scroll #border #url #css #ie

本文介绍了在实现五星图书榜星级比例时遇到的一个CSS问题，即在IE6下，span元素间的3px空隙导致布局不正确。问题源于IE6中span元素默认存在高度。解决方案是通过添加`font-size:0px; line-height:0px; overflow:hidden;`到外层span的样式，以此消除空隙。修改后的CSS代码使得星级比例显示在所有浏览器中保持一致。

 

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

 

 

 

HTML结构：

最低0.47元/天 解锁文章
女朋友要我教她CSS，我就写了这一篇长文，感动哭了？
超逸の学习技术博客
05-30 1万+
女朋友她又要我教她CSS，这4w字长文够了吗？她会被感动到吗？
【前端之旅】CSS三万字总结
请你喝杯Java
11-16 2995
一名软件工程专业学生的前端之旅，记录自己对三件套（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 120
父元素添加 font-size:0px; line-height:0px; overflow:hidden; 转载于:https://www.cnblogs.com/lweiruil/p/4505099.html
多个span标签在同行展示不对齐问题
lucasxt的博客
03-10 979
检查发现存在空标签导致 span:empty { display: none; }
图片上下排列3px间隔的消除方法
ChoiceK的博客
09-03 2431
在布局中，图片上下排列会出现3px的间隔，如下图 消除方法： 1、给居上的img图片添加样式 vertical-align：top; 2、给居上的img图片添加样式 第二种：display：block;将其转为块级元素 推荐使用第一种方法，因为第二种是将行内元素转为块级元素，需要占据父容器的100%的宽度影响布局。 以下是对vertical-align属性的补充（通过查阅
块级元素包含行内元素（img、span等）底部多出3px间隔的解决办法
duguxueao的专栏
09-22 408
html: <div class="logo_left"><!--div的高度是83px--> <img src="images/logo.jpg"/><!--图片的高度是80px--> </div> 解决： 1.那么，为什么div的高度会比img的高度多3px呢？ 　　这是因为，行内元素后面会跟一个空白符，会使它的高度多出3px。 2.怎么解决？ 　　我在查阅验证之后总结了4种方案： 　　1. 设置div{ fon
CSS第五章 CSS盒子模型/标签分类和嵌套规范
晓葉斑比
05-18 1406
CSS五、CSS盒子模型5.1 标准盒子模型5.2 box-sizing样式5.3 盒子模型的一些问题1. margin叠加问题2. margin传递问题扩展 五、CSS盒子模型 5.1 标准盒子模型 组成 : content -> padding -> border -> margin            物品     &
<div class="switch-container"> <el-row :gutter="20"> <el-col :span="20"> <div class="switch-item"> <span>设备一</span> <el-switch v-model="switch1" active-color="#009bff" inactive-color="#f5f5f5" /> </div> </el-col> <el-col :span="20"> <div class="switch-item"> <span>设备二</span> <el-switch v-model="switch2" active-color="#009bff" inactive-color="#f5f5f5" /> </div> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="20"> <div class="switch-item"> <span>设备三</span> <el-switch v-model="switch3" active-color="#009bff" inactive-color="#f5f5f5" /> </div> </el-col> <el-col :span="20"> <div class="switch-item"> <span>设备四</span> <el-switch v-model="switch4" active-color="#009bff" inactive-color="#f5f5f5" /> </div> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="20"> <div class="switch-item"> <span>设备五</span> <el-switch v-model="switch5" active-color="#009bff" inactive-color="#f5f5f5" /> </div> </el-col> <el-col :span="20"> <div class="switch-item"> <span>设备六</span> <el-switch v-model="switch6" active-color="#009bff" inactive-color="#f5f5f5" /> </div> </el-col> </el-row> </div> 上述代码为什么没有按照一行两个排列
最新发布
08-21
- [^1]: 关于WebStorm和Element UI代码提示的解决方法。 - [^2]: 关于模型调整的提示。 - [^3]: 关于el-calendar组件的使用。 这些引用似乎不直接相关，但[^1]提到Element UI，所以我可能可以间接引用它来建议检查...
<span>标签挨着写时的出现的迷之间距问题
TheBadWaka的博客
01-21 2870
问题两个span分行挨着写时，样式会出现迷之间隔，如下： 解决方案1：父元素的font-size设置为0，但是这样会出现一个问题，text-overflow: ellipsis属性不在生效解决方案2：html中将span不分行挨着写，如下图：这样既可以消除间隔，又可以保留text-overflow: ellipsis属性
div 或 span 的高度比 img 的高度要多3px。如何解决？
bug收集
12-19 647
问题： 如果将一个 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> 原因： 异步更新队列
两个span在一行却高低不一致
weixin_43859703的博客
05-17 2574
给第一个span加了超出部分呢省略号以后，两个span虽然还在一个div中，但是居然不同高了！！一个靠上一个靠下一些，我试了各种css居中的方式也没能让两个span同高； 研究了很久发现是overflow：hidden以及不折行影响的，最后解决办法是使用flex布局，两个span就恢复正常了，万能的flex啊！！！ .textTop{ width: 100%; display:...
span标签在ios中错位 span标签位置下移异常
qq_39855581的博客
03-31 1284
场景：span标签在ios中出现错位，往下移了一部分. 安卓以及pc模拟均是正常的。 解决方案：加上vertical-align: top;即可
span标签的使用场景
奶厂小程的博客
03-01 6378
span标签的使用笔记，如何使用span标签的场景
标签的嵌套规则
qq_43713303的博客
12-18 663
标签的嵌套规则 标签之间并不是可以随意嵌套的，至少需要遵循如下规则： 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素,它只能包含其它的内联元素。 <div><p></p></div> -- 对 <a><span></span></a> -- 对 <span><div></div></span> -- 错 有几个特殊的块级元素只能包含内嵌元素
第四章盒子模型
weixin_45728247的博客
12-22 800
认识盒子模型 定义：所谓盒子模型就是把HTML页面中的元素看做是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距、边框和外边距组成。 margin：层的边框以外留的空白 background-color：背景颜色 background-image：背景图片 padding：层的边框到层的内容之间的空白 border：边框 content：内容 平面图如下: 盒子模型相关...
10、标签的嵌套和标签嵌套的意义
山兔的博客
01-03 2058
标签的嵌套 一个标签可以嵌套（包含）其他标签 div标签嵌套span标签，建议写成三行，会比较好看 下面的嵌套写法是错误的，不符合HTML语法 因为它们相互嵌套，这明显是错误的 因为br标签是单标签，不存在结束标签，这应该写成两个独立的标签 编写一个HTML中不存在的标签，会发生什么事？ 也是可以正常显示的 注意 有语法错误的HTML代码，还是可以被浏览器识别显示出来 建议：还是要严格按照HTML语法去编写代码，才能保证最终显示出来的效果是正确的 虽然浏览器的容错能力比较强，但有时候还是会显示出一些
在html中div如何嵌套span,div里套span，span里套a，a里套img，span里的文字部分，怎么实现垂直居中？请见图...
weixin_31360095的博客
06-20 1626
html和css代码如下：Powered by: 实际上，之前的代码中，a标签是没有嵌套在span中的，而是与span同级，如下：Powered by: 后来在网上看到有人说将a标签放在span中应该就可以了。不过，两者试了之后，反正死活无法实现垂直居中。补充：回答中有朋友说在span里的line-height等于图片高度的情况下...
span 标签内部有空隙怎么解决
06-08
如果你在 span 标签内部发现了一些空隙，这可能是由于标签之间的空格或换行符造成的。这些空格和换行符会被视为文本内容，因此在渲染时会显示出来。 为了解决这个问题，你可以使用以下方法之一： 1. 删除标签之间...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值