日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
IECSSBug系列：圖片上沒(méi)有l(wèi)ine-height垂直居中

圖片上沒(méi)有l(wèi)ine-height垂直居中

影響的IE版本

這個(gè)bug影響IE7, IE6

表現(xiàn)

使用line-height方法時(shí)圖片沒(méi)有垂直居中

教程編寫(xiě)時(shí)間

2009.7.18 11:39:56

描述

這個(gè)bug殺死了我好多腦細(xì)胞。我常常在做“產(chǎn)品頁(yè)面”時(shí)，把很多的不同尺寸的圖放到相同尺寸的盒子里，使它們看上去更美觀。即使是我找到了這個(gè)bug的解決辦法之后，我依然痛恨它，因?yàn)槲艺业降膬H有的解決辦法需要添加額外的標(biāo)記元素。不管怎樣，我們來(lái)看一下示例。

示例（英文原文中查看）

 HTML Code：

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
    4.

CSS Code：

 
 
 
    
  
  
  
  1. div {
    2. 
  
  
  
  2.     width: 150px;
    3. 
  
  
  
  3.     height: 155px;
    4. 
  
  
  
  4.     line-height: 155px;
    5. 
  
  
  
  5.     text-align: center;
    6. 
  
  
  
  6. }
    7. 
  
  
  
  7. img {
    8. 
  
  
  
  8.     vertical-align: middle;
    9. 
  
  
  
  9. }
    10.

在IE8以下版本的IE中，瓢蟲(chóng)的圖片沒(méi)有在垂直方向上居中。（嗨，起碼還顯示了好么！）

解決方案

以下是上述bug的解決方法（以類型排序）

解決方法 (干凈的標(biāo)記方法)

該方法的時(shí)間

2009.7.18 11:52:58

可修復(fù)的的版本

所有受該bug影響的版本

描述

我得說(shuō)明，既然這個(gè)解決方法被標(biāo)記為“干凈的標(biāo)記方法”，如果你支持的最低IE版本為7，那么僅需在div中添加空格。（也就是說(shuō)，元素只在IE7以下版本的中需要）

示例（英文原文中查看）

HTML Code：

 
 
 
    
  
  
  
    2. 
  
  
  
  2.     
    3. 
  
  
  
  3.     
    4.
  •  

    • CSS Code：

     
 
 
      
  
  
  
    1. div {
      2. 
  
  
  
    2.     width: 150px;
      3. 
  
  
  
    3.     height: 155px;
      4. 
  
  
  
    4.     line-height: 155px;
      5. 
  
  
  
    5.     border: 1px solid #000;
      6. 
  
  
  
    6.     background: #f00;
      7. 
  
  
  
    7.     text-align: center;
      8. 
  
  
  
    8. }
      9. 
  
  
  
    9. img {
      10. 
  
  
  
    10.     vertical-align: middle;
      11. 
  
  
  
    11. }
      12. 
  
  
  
    12. span {
      13. 
  
  
  
    13.     display: inline-block;
      14. 
  
  
  
    14. }
      15.

    注意我們添加了一個(gè)額外的span從而在7以下版本的IE中修復(fù)該bug；我們還將display屬性設(shè)置為inline-block來(lái)使我們關(guān)鍵的span擁有“l(fā)ayout”。最后結(jié)果：一切都正常了。


    文章名稱：IECSSBug系列：圖片上沒(méi)有l(wèi)ine-height垂直居中
    分享地址：http://m.5511xx.com/article/ccdcjho.html