IE7 css帮助,为什么我的跨度不与我的内嵌图像垂直对齐?

时间:2011-06-15 18:31:10

标签: html css image alignment

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

目前在IE 7中正如此呈现。

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

我忘了提到有javascript / jQuery代码在跨度上设置类。这是显示适当图像的原因。

干杯, 〜在圣地亚哥

1 个答案:

答案 0 :(得分:2)

我在Mac上并且无法从这里测试它,但是你尝试将img浮动到左边吗?