IE下img多余5像素空白

2024-04-21 12:24:26

嗯，开场先胡扯几句不相关地感言。最近的工作让我有了很多实践的机会，同时也让我收获颇丰。在群里聊天的时候也提到过，所有的学习过程，最好是理论－实践－再理论－再实践。。。的一个循环往复的过程。这里说的理论是个比较宽泛地概念，其中包括书本理论，也包括对实践地总结。只有理论没有实践，往往造成眼高手低，想得好，做得差；只一味地实践却不通过理论地学习和总结，看起来好像忙忙碌碌，到头来会两手空空。

最近地实践中，越来越觉得 li 元素中包含 a img 元素的时候会比较麻烦，需要注意，当然，问题还是一如既往的出现在 IE 下。以下为其中一例：

html

<ul>   <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>   <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>   <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>   <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li> </ul>

css

ul{  width: 280px;}ul li{  display:block;    height:57px;  width:277px;}

其中 temp.jpg 尺寸为 277×57

Firefox 下的正常表现：

IE6 下的非正常表现：

很明显地可以看到 IE 中，li 的表现高度，并非我们设定的 57px，而是比其要高，这是因为 img 下面多出了 5px 的空白。

解决方法一

使 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{  display:block;    height:57px;  width:277px;}

解决方法三

设置 img 的 vertical-align: bottom;

ul{   width: 280px; font-size: 0;}ul li{  display:block;    height:57px;  width:277px;}img{ vertical-align:bottom;}

解决方法四

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

ul{    width: 280px; font-size: 0;}ul li{  display:block;    height:57px;  width:277px;}img{ margin-bottom: -5px;}

可以下载 demo 来看

转载于:https://www.cnblogs.com/shihao/archive/2011/12/21/2296056.html

IE下img多余5像素空白相关推荐

[css] 在rem下如何实现1像素？
[css] 在rem下如何实现1像素? 先用px开发,最后把px转换成rem 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前 ...
plsql连接数据库database下拉框一直为空白
踩了一下午的坑总算是成功解决连接问题做个笔记 Oracle安装后环境变量的配置: NLS_LANG=SIMPLIFIED CHINESE_CHINA.ZHS16GBK 此为Oracle字符集 TN ...
ie弹出空白html文档,IE下打开网页有时显示空白解决方法.doc
IE下打开网页有时显示空白解决方法辩叮妖奏爪安晒钙趴佯盎褥柠擅忍辖豺粉确吗面须倍隙履颗肩遍德聂聚骋恒佃池霞隐净庙位镀苑称谆亚霉陶抿驶目常雕醛木胯焕嵌帖恬硫田锗囱凭奈沙皇樊功绳俞渊疮讼蜒峨艳裙赐桐某婿 ...
img下出现几像素空白的问题
先看一个例子和效果,应该就会明白我的问题了. 1 <meta http-equiv="Content-Type" content="text/html; chars ...
在进行页面的DIV CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。...
当一个img标签没得图片时,在firox中,即使给img标签设置了固定高度和宽度,img标签还是不会站位: 解决方法一:直接将img设置为块状元素:即,设置img为"display:bloc ...
微信小程序page页面下有多余空白区域（解决方法）
出现的问题是这样子的: 仔细检查,是因为自定义组件导致的问题,但是组件中对高度没有定义,应该是自适应的. 解决方法: 在使用自定义组件的外面套上一层层view,然后给它设置高度并设置超出部分隐藏即可. ...
Eclipse在Ubuntu8.04桌面系统下安装和弹出空白对话框
1 直接在http://www.eclipse.org/downloads/ 下载最新3.4.1 Eclipse IDE for Java Developers (85 MB) The essenti ...
IE6下溢出多余文字
最近会经常碰到这么个问题: 1.增加百度分享按纽(http://share.baidu.com/get-codes)后其相邻的div里的文件段会出现溢出.解决方法:将相邻层绝对定位置于引用代码之前即可 ...
html图片下方会有一像素,div里嵌套了img底部会有白块问题和图片一像素问题解决 - Macchiato...
div里嵌套了img底部会有白块因为img默认是按基线(baseline)对齐的.对比一下图片和右边的p, q, y等字母,你会发现这三个字母的"小尾巴"和图片下方的空白一样高. ...

最新文章

热门文章