文档章节

IE CSS Bug系列:图片上没有line-height垂直居中

王尘宇
 王尘宇
发布于 2017/09/06 23:48
字数 515
阅读 3
收藏 0
图片上没有line-height垂直居中 影响的IE版本 这个bug影响IE7, IE6 表现 使用line-height方法时图片没有垂直居中 教程编写时间 2009.7.18 11:39:56 描述 这个bug杀死了我好多脑细胞。我常常在做“产品页面”时,把很多的不同尺寸的图放到相同尺寸的盒子里,使它们看上去更美观。即使是我找到了这个bug的解决办法之后,我依然痛恨它,因为我找到的仅有的解决办法需要添加额外的标记元素。不管怎样,我们来看一下示例。 示例( 英文原文中查看) HTML Code:
  1. <div><img src="hl_logo.png" alt="" width="95" height="115"></div>
  2. <!-- NOTE: no white-space in the <div> also triggers bug in IE7 -->
CSS Code:
  1. div {
  2.     width: 150px;
  3.     height: 155px;
  4.     line-height: 155px;
  5.     text-align: center;
  6. }
  7. img {
  8.     vertical-align: middle;
  9. }
在IE8以下版本的IE中,瓢虫的图片没有在垂直方向上居中。(嗨,起码还显示了好么!) 解决方案 以下是上述bug的解决方法(以类型排序) 解决方法 (干净的标记方法) 该方法的时间 2009.7.18 11:52:58 可修复的的版本 所有受该bug影响的版本 描述 我得说明,既然这个解决方法被标记为“干净的标记方法”,如果你支持的最低IE版本为7,那么仅需在div中添加空格。(也就是说,<span>元素只在IE7以下版本的中需要) 示例( 英文原文中查看) HTML Code:
  1. <div>
  2.     <img src="hl_logo.png" alt="" width="95" height="115">
  3.     <span></span>
  4. </div>
  5. <!-- NOTE: <span> is not needed for IE7; whitespace is enough -->
CSS Code:
  1. div {
  2.     width: 150px;
  3.     height: 155px;
  4.     line-height: 155px;
  5.     border: 1px solid #000;
  6.     background: #f00;
  7.     text-align: center;
  8. }
  9. img {
  10.     vertical-align: middle;
  11. }
  12. span {
  13.     display: inline-block;
  14. }
注意我们添加了一个额外的span从而在7以下版本的IE中修复该bug;我们还将display属性设置为inline-block来使我们关键的span拥有“layout”。最后结果:一切都正常了。 原文链接:  haslayout   翻译:  伯乐在线 nighca 译文链接:  http://blog.jobbole.com/49703/

© 著作权归作者所有

共有 人打赏支持
王尘宇
粉丝 1
博文 450
码字总数 469557
作品 0
西安
私信 提问
css行高line-height的一些深入理解及应用

二、一些字面意思 “行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底...

manlianman
2013/10/22
0
0
学习CSS你必须踩得那些坑(六)

这里加了边框方便调试: · 为了能够设置在垂直方向上的高度(padding-top/bottom, margin-top/bottom, height):我们设置行内元素<a> display为inline-block 行内元素是就像水一样,垂直方向...

博为峰教研组
2016/12/26
3
0
html5 图片与文字中间对齐处于同一行、或者图片与按钮处于同一行

在日常开发中,经常会使用到图片与文字或图片与按钮对齐。 1.图片与按钮 处于同一行,并居中对齐,长使用的方法如下: <div> <img src="" style="vertical-align:middle"/> <button type="bu...

突然很想飞
2015/12/08
2.2K
0
【前端Talkking】CSS系列——CSS深入理解之line-height

1.写在前面 两个多周的时间没有写文章了,手好痒好痒,趁着公司在装修,从上周末到本周都在家办公,同时公司的项目并不紧急,于是抽着时间梳理了一下CSS中关于行高的理解,今天发布出来,大家...

micstone
06/08
0
0
IE下css bug集合-翻译自haslayout.net

概述 IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug。 本页列举了IE下的一些问题,实例样本和一些我们已知的解决方法。 尽管我已经尽力按照它们本来的性质对它...

山哥
2012/06/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

基于对象特征的推荐

(本实验选用数据为真实电商脱敏数据,仅用于学习,请勿商用) 在上一期基于协同过滤的的推荐场景中,我们介绍了如何通过PAI快速搭建一个基于协同过滤方案的推荐系统,这一节会介绍一些如何基...

阿里云官方博客
11分钟前
1
0
Ugly Number(leetcode263)

Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers whose prime factors only include 2, 3, 5. Example 1: Input: 6Output: true......

woshixin
35分钟前
2
0
深度模型从研者 眼里的 似然估计 & Hessain 海森矩阵 & Fisher Information (费雪信息)

深度模型的训练的基本依据是最小化模型拟合数据的误差。旨在不仅知其然(如何构建和训练一个深度模型),还应知其所以然(为什么这样训练,可以做哪些优化)。我们就会发现,有很多研究者,在...

刘小米_思聪
39分钟前
0
0
【双十二】12 月 12 日 12 点 12 分限量抢福利,云计算不剁手!

活动详情 1.首充豪礼 双十二当日,新用户首充 200 元送 200 元代金券!仅限前 88 名!先到先得!拼手速!(新用户指 12 月 12 日前已完成注册但从未充值过的用户)
 2.超值返券 双十二当日,...

七牛云
今天
4
0
Calculate Linux 发布 18 LXQt是基于Gentoo的发行版

导读 Calculate Linux 是一个基于 Gentoo 并与 Gentoo 完全兼容的滚动更新发行版家族,专为企业环境下的快速部署而优化。其提供多个不同的分支版本,分别适用于桌面、服务器等应用场景。该项...

问题终结者
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部