文档章节

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

王尘宇
 王尘宇
发布于 2017/09/06 23:48
字数 515
阅读 2
收藏 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
IE下css bug集合-翻译自haslayout.net

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

山哥
2012/06/15
0
0
html5 图片与文字中间对齐处于同一行、或者图片与按钮处于同一行

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

突然很想飞
2015/12/08
2.2K
0
CSS 兼容总结及面试问题

CSS 兼容总结及面试问题 +1、如何定义高度很小的容器? 原因:在IE6下无法定义小高度的容器,是因为有一个默认的行高。 解答:列举2种解决方案:overflow:hidden 或 line-height:0 +2、图片下...

南宫天明
2012/08/30
549
1

没有更多内容

加载失败,请刷新页面

加载更多

GO 数组相关操作

package mainimport("fmt""math/rand""time")func main() {//数组的几种定义方式var arr1 [3]int = [3]int{1,2,3}var arr2 = [3]int{4,5,6}arr3 := [3]string{"h", "w", ......

汤汤圆圆
36分钟前
1
0
JAVA 中interrupt、interrupted和isInterrupted的区别

首先,我们说明下三个方法的功能 interrupt() 向当前调用者线程发出中断信号 isinterrupted() 查看当前中断信号是true还是false interrupted() 是静态方法,查看返回当前中断信号并将中断信号...

我爱春天的毛毛雨
41分钟前
1
0
Coding and Paper Letter(二十二)

资源整理。 1 Coding: 1.开源项目openeo api。oponEO开发了一个开放的API,以简单统一的方式将R,python和javascript客户端连接到对地观测大数据云平台的后台。 此存储库包含此API,即oponE...

胖胖雕
今天
1
0
RxJS的另外四种实现方式(三)——性能最高的库

接上篇 RxJS的另外四种实现方式(二)——代码最小的库(续) 代码最小的库rx4rx-lite虽然在性能测试中超过了callbag,但和most库较量的时候却落败了,于是我下载了most库,要解开most库性能...

一个灰
今天
6
0
马太效应

马太效应

yizhichao
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部