注明的div+img 的3px bug

最新推荐文章于 2021-06-04 00:03:23 发布
最新推荐文章于 2021-06-04 00:03:23 发布
阅读量475 收藏
点赞数
分类专栏： 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/make2008/article/details/48367571
版权

一个div 中嵌入一个图片后，图片下方和div边框之间总是存留了3个像素的空白，这是为毛，为毛呢

著名的3像素bug ie谷歌火狐通杀

解决办法，给img的样式中加入

方案一

vertical-align :middle;


方案二

display: block;


中年CodeBoy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2021-05-06 利用vertical-align实现垂直居中效果以及解决图片底部3px的间隙bug
GAARA
05-06 202
vertical-align可以用来给块元素设置垂直对齐方式,对于非行内块元素需要先转化成行内块元素   示例: <style> img { /* img已经是行内块元素 */ vertical-align: middle; } span { display: inline-block; vertical-al
ie img 3px bug
04-05 74
ie img 3px bug 日期：2008-11-22分类：CSS ie img 有 3px 的缝隙也是 ie 的经典 bug 之一，相信已经不陌生了，但还是先看看效果吧（也许你并没有见过）： 效果1效果2 效果1 图片下方有缝隙，这是最常见的；效果2 则不但下面有，右边也有，并且在 FF 和 opera 里，下方也有缝隙。这是因为效果2 图片的...
3px bug
weixin_30763397的博客
09-09 117
在层里只有一个img元素时，会出现img下面与层的3px空白。 1<divstyle="backgrond:red;font-size：12px；">2<imgsrc="http://assets.taobaocdn.com/img/chl/fp/logo080808.png">3</div>网上有很多这个bug的解决办法，但是...
IE6传说中的3px BUG
tow11的博客
07-24 182
  万恶的IE6 今天遇到了IE6传说中的3px BUG： 当左边的DIV浮动(float:left)起来后，右边的DIV就可以接着排过去，形成典型的一列固定，第二列自适应的布局。 其实很简单，但是IE6就是...... 看实例：  Html代码   &lt;style type="text/css"&gt;   &lt;!--      #left {    ba...
很牛的ie img 3px bug
闲谈
11-26 73
ie上如果图片img标签前后含有空格 会出现一个3px的空隙 下边和右边     解决的办法 1.去掉空格 2.设置img display : block
DIV+CSS常见问题的14条原因分析
09-25
例如，IE下14px的宋体文字实际高度为16px，而Firefox则是17px。解决方法是设定`line-height`，确保所有文字具有默认的行高。 2. **容器高度限定问题**：Firefox下，若容器设置了固定高度，内容不会撑大容器，而IE则...
DIV+CSS浏览器的兼容性_大前端1
最新发布
08-04
解决方法是为 img 添加 `display:block` 或者在 img 后添加一个空的非换行符，如 `<div><img src="" mce_src=""/>;"> </span></div>`。 处理浏览器兼容性问题时，开发者需要熟悉各种浏览器的特性，并利用 CSS ...
div里的图片距离div下边框多3个像素的解决方法
09-25
在网页设计中，有时会遇到一个常见的问题，即图片在`div`容器内与下边框之间存在3个像素的额外间距，这被称为"3像素bug"。这个问题通常是由于浏览器的渲染机制导致的，尤其是在处理行内元素如`img`标签时。下面我们...
css常见的bug（ie）
01-28
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div> </div> ``` 6. **固定高度的父级和100%高度的子级**： 要使子级的高度随着固定高度的父级变化，需要确保HTML和BODY元素的高度设置...
css 解决方案-3px bug 和左浮动右侧顶部对齐
江湖再见
03-16 2004
3px bug 和左浮动右侧顶部对齐 *{ margin:0; padding:0; } body{ font-family:"Lucida Console", Monaco, monospace,"宋体"; font-size:16px; } a,img{ border:0 none; } .w
div中添加<img>后图片下方多出3px空白
Pure_Eyes的博客
03-03 733
如果将一个img放在div里面，你会发现在img下面无端端的就多出3px的空白出来。padding、margin、border都设为0，无效！ 解决办法： 1、设置div{ font-size: 0} 2、设置img{ display: block} 3、设置img{ vertical-align:top;}
img div之间差3px
水中熊的博客
11-13 1634
今天有人问我一个奇葩的问题，从来没遇到过，搞了半天才知道原因。 事件起因：在一个div里放一个img，但下方会出现一小块空白，他想去掉。 事件经过：当时是以为是边距的简单问题，就过去通过chrom调试，调试了半天发现，当内外边距都为0时，下方还是会有3px的空白，搞不清楚只好上网搜索一下，奥！！！！！原来是浏览器解析问题。 事件结果：因为img是内联元素，div是块元素，浏览器解析时会在im
如何解决图片3px
qq_45279180的博客
11-23 1873
前言 其实刚开始我看到这个问题的时候也不知道是什么原因，因为当时刚学了一个vertical-align属性所以就设置了vertical-align为center但是并没有解决问题，后来查了资料才知道是因为vertical-align的默认值的问题。 原因：主要是因为图片的垂直对齐方式vertical-align引发的，默认值是baseline，默认为此值时图片下方就会多出3px。 解决方案： 1.将图片的垂直对齐方式vertical-align的值设置为bottom，就可以解决这个问题。 2.将图片disp
IE6 两个div有间隙的问题（IE 3px bug）解决方法
cychai的专栏
02-24 4197
 在IE7中两个div是紧挨着的，但是在IE6中会出现两个div之间出现3px左右的间隙，这就是传说中的“IE 3px bug”。 解决方法如下： 且看示例：uiv="Content-Type" content="text/html; charset=utf-8" />ChaiChunyan fixed ie 3px bug demo<!-- #left
CSS——img标签消除3px
weixin_30617797的博客
01-06 410
1、dispaly：block 2、float：left 这两种都可以消除3px 转载于:https://www.cnblogs.com/wuqiuxue/p/8214397.html
解决img图片底部3px
my_csdn2018的博客
05-17 3140
给样式添加： display: block  或者 vertical-align: top 如果觉得对亲有用 帮忙点下赞哦！！！
img{display:block;}与Img图片默认的3px空白缝隙解决方法以及display相关问题
Silence-Lee的博客
05-18 4731
img{display:block;}与Img图片默认的3px空白缝隙解决方法以及display相关问题 1、为什么经常见img{display:block;}这种设置？ img{display:block;} 表示将img标签，即图片标签由行内元素变成一个块级元素。 一般在制作轮播网页或使用到img图片时，我们都会对图片设置img{display:bolck}。因为img图片下方会有一个3p...
解决img父元素高度多出3px
禅林阆苑
05-09 1620
解决img父元素高度多出3px1 现象  当div / a……中包含img时，父元素的高度比img图片的高度多出3px<div> <img src=" "> <div>  结果运行之后发现，不管是在移动端还是pc端，都会出现这种问题。刚开始以为是父元素初始化了margin和padding的原因，排查css无果，又怀疑是html空格的原因，把html改成<div><img src=" "/><
html图片有3像素左右空白,图片下面出现空白像素BUG的常用解决方法归纳
weixin_39616855的博客
06-04 775
图片下面出现空白像素BUG的常用解决方法归纳发布时间：2013-09-23 17:07:58 作者：佚名 我要评论遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的，这里把解决直接把解决image图片布局下边的多余空白的BUG的常用方法归纳，供大家参考在进行页面的DIV+CSS排版时，遇到IE6(当然有时Firefox下也会偶遇)浏览器...
DIV+CSS教程：从基础知识到实践应用
"DIV+CSS有利学习资源" 本资源摘要信息将详细讲解DIV+CSS的基础知识和高级应用，帮助读者更好地理解DIV+CSS的使用方法和技巧。 **DIV+CSS基础知识** 在学习DIV+CSS之前，我们需要了解什么是DIV+CSS。DIV是HTML中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值