html - IE7 css 帮助，为什么我的跨度不与我的内联图像垂直对齐？

Question

我有以下html和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 但是它不起作用。跨度被向下推到图像下方。它仍然是 float 的。我在另一个问题中读到解决方案是更改跨度的行高以匹配图像等......它没有用。请分享有关如何修复此错误的任何提示或技巧。我真的很感谢任何反馈。

它目前在 IE 7 中是这样呈现的。

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

我忘了提到在 span 上设置类的 javascript/jQuery 代码。这是显示适当图像的内容。

干杯，~ck 在圣地亚哥

Answer 1

我在 Mac 上，无法从这里进行测试，但您是否尝试将 img float 到左侧？