IE7的CSS幫助，爲什麼我的跨度不與我的內聯圖像垂直對齊？

我有以下的HTML和CSSIE7的CSS幫助，爲什麼我的跨度不與我的內聯圖像垂直對齊？

<div id="header"> 
    <div id="headerTopLeft"> 
     <div id="areaSelect" style="display: none;"> 
      <img id="imgHome" alt="Home" src="/Content/images/home.png" jQuery1308161709610="52" /> 
      <span>&nbsp;</span> 
     </div> 
    </div> 
</div> 

<style> 
#header 
{ 
    height: 75px; 
} 
#headerTopLeft 
{ 
    height: 75px; 
    padding-top: 9px; 
} 
#headerTopLeft 
{ 
    width: 17%; 
    margin-left: 1%; 
    float: left; 
} 
#areaSelect 
{ 
    height: 40px; 
    line-height: 27px; 
    margin-left: 10px; 
    display: none; 
} 
#areaSelect IMG 
{ 
    line-height: 27px; 
    cursor: hand; 
} 
#areaSelect > SPAN 
{ 
    width: 165px; 
    height: 27px; 
    line-height: 27px; 
    padding-right: 3px; 
    float: right; 
    display: inline-block; 
} 
    #areaSelect SPAN.repair 
{ 
    background-image: url("images/mod_title_r.png"); 
    background-attachment: scroll; 
    background-repeat: no-repeat; 
    background-position-x: 0%; 
    background-position-y: 0%; 
    background-color: transparent; 
    } 
    #headerTopLeft 
{ 
    margin-left: 0px; 
} 
    #areaSelect IMG 
{ 
    line-height: 27px; 
    } 

</style>

我想要的跨度和圖像的垂直對齊。這適用於Chrome，Safari，FireFox和IE8和IE9。 IE7然而它不起作用。跨度被壓低到圖像下方。它仍然是正確的。我讀另一個問題的解決辦法是改變跨度的線高度以匹配圖像等...它沒有工作。請分享有關如何解決此錯誤的任何提示或技巧。我真的很感激任何反饋。

它目前呈現這樣在IE 7

******************************** 
* *******      * 
* * btn *      * 
* *******      * 
*    ***************** 
*    *  span  * 
********************************

我忘了，何況還有JavaScript代碼設置跨度類/ jQuery代碼。這是顯示適當的圖像。

乾杯，〜CK在聖地亞哥

來源

2011-06-15 Hcabnettek

你可以使用來自[http://dummyimage.com/](http://dummyimage.com/）的圖片來製作代碼的[JS Bin]（http://jsbin.com/）演示嗎？ – thirtydot 2011-06-15 18:38:54

我試過了，無法做出準確表示問題的JSBin。正如joot所建議的那樣，我將圖像在IE7中左移，並且工作得很好。 – Hcabnettek 2011-06-15 18:51:04

我在Mac上，不能從這裏測試，但你嘗試浮動的IMG向左？

來源

2011-06-15 18:45:22 joostschouten

這在這種情況下爲我做了詭計。 – Hcabnettek 2011-06-15 18:50:50

IE7的CSS幫助，爲什麼我的跨度不與我的內聯圖像垂直對齊？

回答

相關問題