今天在做一个测试的时候碰到的问题:用一个 div 包裹一个 img ,代码如下:

html代码:

 <div class="box">
<img src="preloader.gif">
</div>

css代码:

.box{
position:absolute;
top:40%;
left:40%;
background:red;
}

在 Chrome 里看的时候,发现图片下面有条 3px 高的红边儿,在 FF 里看的时候是 5px 的红边儿,把 img 和 div 的 margin 和 padding 都清零,再看也没有效果。百思不得其解。后来,在网上查了下,两个解决方案,自己试过都可以解决:

  1、img{ display:block; }

  2、img{ vertical-align:middle; }

不大会写,也不大会说,开个博客也没咋用过,本来都觉得无关紧要,能解决问题就行,但是最近在找工作,面试的时候常常临时脑子放空,不知道该说什么了,才意识到有问题了,今天就当做开始吧,以后自己也要多练习讲解,把自己知道的也多拿出来分享,在交流里进步。加油!

img 的 3px的更多相关文章

  1. 块级标签包含行内标签底部出现3px间隔的解决办法

    当块级标签(如div)内包含了行内标签(如img),则外层元素与内层元素底部会出现3px的间隔: 代码如下: <!doctype html> <html lang="en& ...

  2. 图片下方出现多3px的原因及解决方法

    产生原因:主要是因为图片的垂直对齐方式vertical-align引发的,默认值是baseline,默认为此值时图片下方就会多出3px. 解决方案: 1.将图片的垂直对齐方式vertical-alig ...

  3. IE6 IE7 hasLayout bug之li间的3px垂直间距

    1. li中仅包含a,span等内联(行内)元素2.触发条件: li元素的layout被触发(通常为设置了宽或高,设置overflow:hidden在IE7下同样触发layout),且a或span元素 ...

  4. 关于div包裹img,底下多出3px间隙的问题

    背景:昨天写过一个div包裹图片的html,已经reset了所有的div,但还是发现img与div底部会有3px的间距,我检查了所有的css,发现并未发现什么问题,结果度娘了一下,发现好多朋友都遇到了 ...

  5. div里包含img底部多出3px的解决办法

    如果将一个img放在div里面,你会发现在img下面无端端的就多出3px的空白出来.padding.margin.border都设为0,无效!那么怎么解决这个问题呢? 问题图: 解决后的效果: 这个B ...

  6. 移动端Retina屏边框线1px 显示为2px或3px问题解决方法

    我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的.   1.何为“设备像素比dev ...

  7. 终于遇到了传说的ie 6 img 3px的bug

    最近在做一个网站,基本上已经算完成,就开始完善细节部分了. IE6可能是微软最为YD 的一款浏览器了吧,至今还没有退出历史的舞台,尽管google都宣布不在支持它了. 因为该死的ie6,虽死但是牢牢地 ...

  8. ie img 3px bug

    ie img 3px bug 日期:2008-11-22 分类:CSS ie img 有 3px 的缝隙也是 ie 的经典 bug 之一,相信已经不陌生了,但还是先看看效果吧(也许你并没有见过): 效 ...

  9. CSS——img标签消除3px

    1.dispaly:block 2.float:left 这两种都可以消除3px

随机推荐

  1. CSS中padding和margin以及用法

    CSS中padding与margin 1.padding:内边距,表示控件内容相对于边缘的距离. 2.margin:外边距,表示控件边缘相对于父空间的边缘. 参考:http://www.studyof ...

  2. MAC本如何优雅的创建定时任务

    在MACOS上设置定时任务大体有两种方案.一种是使用crontab,一种是使用Schedule,今天结合我的使用简单介绍一下. 先说一下背景,为什么MAC可以用crontab.如果使用过Linux的同 ...

  3. 手把手教你webpack、react和node.js环境配置(上篇)

    很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...

  4. Servlet的监听

    Servlet监听 在<Servlet和Jsp>中我们使用了ServletConfig获取Servlet的初始配置,用ServletContext来获取整个Web应用的初始配置,但如果需要 ...

  5. Html<img>标签特写 2017-03-10 AM

    1.插入图片 <img src="picture1.gif" width="300" height="100" title=" ...

  6. ST HW3

    7. Use the following method printPrimes() for questions a-f below. /******************************** ...

  7. SSH登录与增删改查demo详解+源代码

    点击下载,测试绝对可用SSH整合框架登录加增删改查demo 下载地址:http://download.csdn.net/detail/qq_33599520/9784679   一.框架概述 spri ...

  8. Java中的值传递

    1.先比较下字符串的比较 == 代表全等于 值和地址(存放地址) 全部相等于. equals 值等于== 和 equals的区别 列如下面的 如果name1==name2是等于的 然而name1==n ...

  9. 20155304 2016-2017-2 《Java程序设计》第四周学习总结

    20155304 2016-2017-2 <Java程序设计>第四周学习总结 教材学习内容总结 第六章 继承: 概念: 面向对象中,为避免多个类间重复定义共同行为.(简单说就是将相同的程序 ...

  10. 简单的add函数的N种写法

    最近在学习es6,看到for-of这里,就想自己写着练习一下,于是就准备写一个小函数add来求和.函数很简单,如add(1,2,3)这样.于是我开始着手 一开始我是这么写的 function add( ...