img 的 3px
今天在做一个测试的时候碰到的问题:用一个 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的更多相关文章
- 块级标签包含行内标签底部出现3px间隔的解决办法
当块级标签(如div)内包含了行内标签(如img),则外层元素与内层元素底部会出现3px的间隔: 代码如下: <!doctype html> <html lang="en& ...
- 图片下方出现多3px的原因及解决方法
产生原因:主要是因为图片的垂直对齐方式vertical-align引发的,默认值是baseline,默认为此值时图片下方就会多出3px. 解决方案: 1.将图片的垂直对齐方式vertical-alig ...
- IE6 IE7 hasLayout bug之li间的3px垂直间距
1. li中仅包含a,span等内联(行内)元素2.触发条件: li元素的layout被触发(通常为设置了宽或高,设置overflow:hidden在IE7下同样触发layout),且a或span元素 ...
- 关于div包裹img,底下多出3px间隙的问题
背景:昨天写过一个div包裹图片的html,已经reset了所有的div,但还是发现img与div底部会有3px的间距,我检查了所有的css,发现并未发现什么问题,结果度娘了一下,发现好多朋友都遇到了 ...
- div里包含img底部多出3px的解决办法
如果将一个img放在div里面,你会发现在img下面无端端的就多出3px的空白出来.padding.margin.border都设为0,无效!那么怎么解决这个问题呢? 问题图: 解决后的效果: 这个B ...
- 移动端Retina屏边框线1px 显示为2px或3px问题解决方法
我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的. 1.何为“设备像素比dev ...
- 终于遇到了传说的ie 6 img 3px的bug
最近在做一个网站,基本上已经算完成,就开始完善细节部分了. IE6可能是微软最为YD 的一款浏览器了吧,至今还没有退出历史的舞台,尽管google都宣布不在支持它了. 因为该死的ie6,虽死但是牢牢地 ...
- ie img 3px bug
ie img 3px bug 日期:2008-11-22 分类:CSS ie img 有 3px 的缝隙也是 ie 的经典 bug 之一,相信已经不陌生了,但还是先看看效果吧(也许你并没有见过): 效 ...
- CSS——img标签消除3px
1.dispaly:block 2.float:left 这两种都可以消除3px
随机推荐
- STM32按键控制程序
由于最近时间比较匆忙 已经有很久的时间没有写博客了 这次和大家分享的是STM32的一个按键的小程序 他的优点呢也是和上面一个LED一样就是便于移植 更改管脚方便 虽然都是些小程序 但是我觉得他们就像基 ...
- 指针与数据结构算法_链表(C语言)
一.变量: 声明一个变量系统是没有给这个变量分配内存空间的: 例: int j;//编译的时候是没有分配内存空间的 ;//计算机在编译的时候就会给这个i分配4个字节的内存空间 二.malloc动态分配 ...
- win8系统不小心禁用了管理员权限怎么解决
第一步:查看系统有没有其他管理员账户 按win+x键,然后选择命令提示符 点击命令提示符打开窗口,输入net localgroup Administrators命令,然后回车 如上图,查看窗口中的&q ...
- 团队项目中js冲突
在我们平时的项目中,特别是模块化开发中.经常会遇到一些js冲突问题,特别是当项目复杂到一定程度的时候.比如项目中引入了相当多的类库,框架以后. 那么.我们如何去避免或者解决这类问题呢? 1.避免使用全 ...
- 中文分词工具thulac4j正式发布
1. 介绍 thulac4j是THULAC的Java 8实现,相比于官方Java实现THULAC-Java,我们做了如下工作: 规范化分词词典,并去掉一些无用词: 重写DAT(双数组Trie树)的构造 ...
- yii2的变量是如何注入到视图中去的?
我对yii2的控制器中的变量如何渲染到视图中这个问题一直很好奇,另外,我还对yii2如何加载静态资源,如js和css比较好奇,于是趁着周末就看了下yii2的相关源码想把这两个问题都弄明白.变量如何渲染 ...
- 3450: Tyvj1952 Easy
3450: Tyvj1952 Easy Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 269 Solved: 198[Submit][Status] ...
- 1644: [Usaco2007 Oct]Obstacle Course 障碍训练课
1644: [Usaco2007 Oct]Obstacle Course 障碍训练课 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 383 Solved ...
- 1709: [Usaco2007 Oct]Super Paintball超级弹珠
1709: [Usaco2007 Oct]Super Paintball超级弹珠 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 339 Solved: ...
- TextView加边框,自定义,上下左右四条线 颜色,想用哪个用哪个
1.这是一个自定义的TextView ,看吧,底下就是代码,应该都可以看懂,这里就不多说了 package com.example.admin.myutilsborder;import android ...