css code: div {     width: 150px;     height: 155px;     line-height: 155px;     text-align: center; } img {     vertical-align: middle; } 在ie8以下版本的ie中,瓢虫的图片没有在垂直方向上居中。(嗨,起码还显示了好么!) 亚博电竞官方网址的解决方案 以下是上述bug的解决方法(以类型排序) 解决方法 (干净的标记方法) 该方法的时间 2009.7.18 11:52:58 可修复的的版本 所有受该bug影响的版本 描述 我得说明,既然这个解决方法被标记为“干净的标记方法”,如果你支持的最低ie版本为7,那么仅需在div中添加空格。(也就是说,元素只在ie7以下版本的中需要) 示例(英文原文中查看) html code:
         
css code: div {     width: 150px;     height: 155px;     line-height: 155px;     border: 1px solid #000;     background: #f00;     text-align: center; } img {     vertical-align: middle; } span {     display: inline-block; } 注意我们添加了一个额外的span从而在7以下版本的ie中修复该bug;我们还将display属性设置为inline-block来使我们关键的span拥有“layout”。最后结果:一切都正常了。 原文链接: haslayout   翻译: 伯乐在线 - nighca 译文链接: http://blog.jobbole.com/49703/"/>

ie css bug系列:图片上没有line-亚博电竞官方网址

4,961views
no comments

共计 1260 个字符,预计需要花费 4 分钟才能阅读完成。

图片上没有 line-height 垂直居中

影响的 ie 版本

这个 bug 影响 ie7, ie6

表现

使用 line-height 方法时图片没有垂直居中

教程编写时间

2009.7.18 11:39:56

描述

这个 bug 杀死了我好多脑细胞。我常常在做“产品页面”时,把很多的不同尺寸的图放到相同尺寸的盒子里,使它们看上去更美观。即使是我找到了这个 bug 的解决办法之后,我依然痛恨它,因为我找到的仅有的解决办法需要添加额外的标记元素。不管怎样,我们来看一下示例。

示例()

html code:

  1.  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 中添加空格。(也就是说, 元素只在 ie7 以下版本的中需要)

示例()

html code:

  1.     
  2.     
  •  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”。最后结果:一切都正常了。

    原文链接:   翻译:– 

    译文链接:

    正文完
     
    亚博电竞官方网址 copyright notice: our original article, by 网站建设 2013-10-29 publish, total 1260 words.
    转载说明:除特殊说明外本站文章皆由cc-4.0协议发布,转载请注明出处。
    comment(no comments)
    网站地图