IE浏览器中div和li包裹的img有5px空白的解决方案

最新推荐文章于 2022-06-08 13:33:46 发布
最新推荐文章于 2022-06-08 13:33:46 发布
阅读量1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 浏览器兼容性问题 文章标签： IE img 5px空白
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mafan121/article/details/51455873
本文介绍了在IE浏览器中解决img元素底部出现5px空白的问题，提供了三种有效的方法：调整vertical-align属性、使用负margin-bottom以及改变img元素的display属性。

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

在IE浏览器中用div或者li包裹一个img元素会发现img底部有5px的空白。解决方案如下：

1.设置img的vertical-align: bottom；

    这样做的目的是让图片靠底部展示，这样就可以将空白处遮盖了。而div是适用子元素高度的，就不会再多出5px了。


2.设置img的margin-bottom:-5px;

   这样做是让图片的底部上移5px，这样图片的空白部分就被填充了。


3.设置img元素为块级元素display:block;

   块级元素的高度来源于本身高度或子元素高度。


如下图：图一是修改后无5px空白的样子，图二是未修改前的样子


HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 7207
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
vuejs搭建的项目对于ie浏览器的处理
diaobei2084的博客
12-28 9276
Vue不支持IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性，所以在项目中需要对IE浏览器做处理 1.在index.html中写入以下代码 <!--[if ie]> <script> 　　window.location.href = './static/ifie.html; </script> ...
解决IE下img多余空白的办法
ajo49838的博客
09-15 192
最近地实践中，越来越觉得 li 元素中包含 a img 元素的时候会比较麻烦，需要注意，当然，问题还是一如既往的出现在 IE 下。以下为其中一例： html <ul><li><a href="#"><img src="img/temp.jpg" alt="" /></a></li><li>&l...
IE中div或li元素中img下面多出了5px的空白解决方法
03-16 407
解决方法 一： 使 li 浮动，并设置 img 为块级元素 ul{width: 280px;}ul li{float:left;display:block;height:57px;width:277px;}img{display: block;}   解决方法 二： 设置 ul 的 font-size:0; ul{width: 280px;font-size: 0;}ul li{dis...
解决 img 5px 间距的问题
z318913的博客
06-08 855
解决img中间距5px的问题
IE中img标签多出5px的空白之4种解决方法
风的专栏
11-22 2608
今天我们在网页布局的时候，会发现IE中img样式会多出5px的空白，那怎么办呢？下面给出4中解决办法： 工具/原料 包含img标签的任意源代码片段 代码编辑器 方法/步骤 解决方法1: 设置 img 的 vertical-align: bottom; ul{
IE中img多出5px的空白解决4种方法
牛牛的空间
12-17 259
 li 元素中包含 a img 元素的时候会比较麻烦，需要注意，当然，问题还是一如既往的出现在 IE 下。以下为其中一例 &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="temp.jpg" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a
css实现兼容火狐、IE的LI奇偶行颜色交替方法
09-24
为了确保在不同浏览器下的兼容性，我们需要测试在Firefox、Chrome、Safari、Edge以及不同版本的IE浏览器上查看页面，以确保颜色交替效果正常显示。如果遇到兼容性问题，可以使用条件注释或CSS前缀（如 `-moz-` 和 `-...
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D旋转立体相册源码（送给那个她）</title> <link rel="stylesheet" href="index.css"> <link rel="shortcut icon" href="https://www.xfabe.com/favicon.ico" type="image/x-icon" /> </head> <body> <!-- 自动循环播放音乐（谷歌浏览器内核除外） --> <audio src="https://links.xfyun.club/xfyun/fansisi.mp3" autoplay="autoplay" loop="loop" controls="controls"></audio> <!-- 3d旋转的盒子 --> <div class="xf_3d_box"> <!-- 内部 --> <ul class="xf_rotate_1"> <!-- 这里修改照片路径 --> <li><img src="img/xw1.jpg" alt="女友照片"></li> <li><img src="img/xw2.jpg" alt="女友照片"></li> <li><img src="img/xw3.jpg" alt="女友照片"></li> <li><img src="img/xw4.jpg" alt="女友照片"></li> <li><img src="img/xw5.jpg" alt="女友照片"></li> <li><img src="img/xw6.jpg" alt="女友照片"></li> </ul> <!-- 外部 --> <ul class="xf_rotate_2"> <li><img src="img/xw1.jpg" alt="女友照片"></li> <li><img src="img/xw2.jpg" alt="女友照片"></li> <!-- 第三个和第四个隐藏了 --> <li><img src="img/xw3.jpg" alt="女友照片"></li> <li><img src="img/xw4.jpg" alt="女友照片"></li> <li><img src="img/xw5.jpg" alt="女友照片"></li> <li><img src="img/xw6.jpg" alt="女友照片"></li> </ul> </div> <script> let div = document.querySelector('.xf_3d_box') let ul = document.querySelector('.xf_rotate_2') let xfhusband = false div.addEventListener('click', function () { xfhusband = !xfhusband if (xfhusband) { ul.style.opacity = 1 } else { ul.style.opacity = 0 } console.log((xfhusband)); }) </script> </body> </html> 如何在原程序的基础上增加鼠标双击实现圆柱形木马旋转效果的切换
最新发布
06-05
-- 自动循环播放音乐（谷歌浏览器内核除外） --> <audio src="https://links.xfyun.club/xfyun/fansisi.mp3" autoplay="autoplay" loop="loop" controls="controls"></audio> <!-- 3d旋转的盒子 --> <div class=...
解决 div或者a标签的高度比里面的img高度多了5px 问题
xiaozaq的博客
01-18 3593
a元素或者div元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把a撑高了。 解决办法一是消除掉匿名盒子的高度，也就是给a设置line-height:0或fo
div之间横竖方向的5px间距
yionr的博客
12-02 1584
问题描述 我们想在一个400*400的容器内放下4个200*200的div，实现代码如下： style ------ .father { width: 400px; height: 400px; outline: 1px solid blue; } .item { width: 200px; height: 200px; display: inline-block; background-color: red; } body ------ <div class="father"> &
padding:5px 0px； 是什么意思
wujian_csdn_csdn的博客
09-16 3122
上下内边距为5px,左右内边距为0px。 下面来了解一下padding: Padding（填充）属性定义元素边框与元素内容之间的空间。 padding 简写属性在一个声明中设置所有内边距属性。设置所有当前或者指定元素内边距属性。该属性可以有1到4个值。 举个例子说明： padding:10px 5px 15px 20px; 上内边距是 10px 右内边距是 5px 下内边距是 15px 左内边距是 20px 当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。
解决div（或者其他块级标签）里面img图片下方有空白的问题
Emily
01-22 1379
 如下，可以发现img图片下方会有留空问题。 &lt;body&gt; &lt;div style="background: skyblue"&gt; &lt;img src="banner2.jpg" alt=""&gt; &lt;/div&gt; &lt;/body&gt; 空白产生的原因：图片默认的vertical-ali
html图片与周围元素边界5px,在CSS3中设置元素的边框、背景和大小的方法讲解
weixin_39642981的博客
06-04 1787
边框和边框相关的属性如下。border-width用于设置边框的宽度，可选择包括：1)：将边框宽度设为以CSS度量单位(如em、px、cm)表达的长度值；2)：将边框宽度值设为边框绘制区域的宽度的百分数；3)thin、medium和thick：将边框宽度设为预设宽度，这三个值的具体意义是由浏览器定义，三个值代表的宽度一次增大，边框宽度的默认值是medium。border-style用于设置绘制边框...
如何将图片包裹进div里
Sunlight
09-12 1422
今天在敲网页UI的时候，想把一个图片包裹在一个div里，结果发现包不进去 试了好几次都不行，怎么办呢 我想到了那个css属性：overflow：hidden； 之前有用过这个，但是是在做轮播图的时候用到的，为了隐藏掉超过区块大小的图片，这也是hidden（隐藏）的本意 然后我就试了一下在要包裹img的div里写入overflow：hidden； 结果奇迹发生了
li元素不能直接放img标签
jiaxiaofeng521016的专栏
07-25 4490
今天无意中发现li标签中不能直接放img标签，解决办法是img外面加入一个p标签；否则，会有img很有可能会超出父元素，导致后面的元素无法正常显示；
解决IE下的li中img多余4px的问题
随记
03-06 397
li 元素中包含 a img 元素的时候出现问题。html：css：ul{width: 280px;}ul li{display:block;height:57px;width:277px;}其中 temp.jpg 尺寸为 277×57在Firefox 下的表现是正常的，IE6 下的表现就是明显有问题了：很明显地可以看到 IE 中，li 的表现高度，并非我们设定的 57px，而是比其要高，这是因为
element-ui 解决在IE（ie）浏览器下选择高度会出现空白的问题
piaocanY的博客
09-07 625
测试在测第二轮 ie浏览器下，elemnt-ui的表单出现了以下这种情况 仔细检查样式发现，el-select的高度为50px(正常的)，但是其直接父级.el-form-item__content的高度就是50.8px。select和父级本身都没有样式语句导致这个现象。至于是为什么，我也还一头雾水。不过多次尝试后发现了以下 解决办法： 给el-form-item__content加上display:flex; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值