IE7は表のヘッダーを別様に表示します

Question

私はヘッダー付きの表を持っています。各ヘッダーには、thの間のsperatorとして使用する背景イメージを持つスパンが含まれています。

すべてのブラウザで表示されるはずですが、IE7ではセパレータイメージ（背景のスパン） が下部に表示されます。

グッド（IE8 +、クロム、FF）：

悪い（IE7）：

HTML：

<div class="tableWrapper"> 
      <table> 
       <thead> 
        <tr> 
         <th class="sortable top-left-round"><a href="#" class="sortable">Lead Id</a><span></span></th> 
         <th class="sortable"><a href="#" class="sortable">Create Date</a><span></span></th> 
         <th class="sortable"><a href="#" class="sortable">Target Group</a><span></span></th> 
         <th class="sortable"><a href="#" class="sortable">Activity</a><span></span></th> 
         <th class="sortable"><a href="#" class="sortable">Type</a><span></span></th> 
         <th class="sortable"><a href="#" class="sortable">Last Update</a><span></span></th> 
         <th class="sortable"><a href="#" class="sortable">Close Date</a><span></span></th> 
         <th class="action_header_short top-right-round"><span>View</span></th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr class="first"> 
         <td>1</td> 
         <td class="col_name" title="Jackson">10/12/2011</td> 
         <td title="Jackson">Jackson</td> 
         <td title="Jackson">Jackson </td> 
         <td title="Jackson">Jackson</td> 
         <td title="Jackson">10/12/2011</td> 
         <td title="Jackson">10/12/2011</td> 
         <td class="action"><a href="#" class="view-btn"></a></td> 
        </tr> 
        <tr> 
         <td>1</td> 
         <td class="col_name" title="Jackson">10/12/2011</td> 
         <td title="Jackson">Jackson</td> 
         <td title="Jackson">Jackson </td> 
         <td title="Jackson">Jackson</td> 
         <td title="Jackson">10/12/2011</td> 
         <td title="Jackson">10/12/2011</td> 
         <td class="action"><a href="#" class="view-btn"></a></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
     <!-- end .tableWrapper --> 

CSS：

table{ 
width: 890px;   
margin-left: 25px; 
border-collapse:collapse; 
} 
td{ 
border: 1px solid #99a3a7; 
} 
.top-left-round{ 
    -moz-border-radius-topleft: 5px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomright: 0px; 
    -moz-border-radius-bottomleft: 0px; 
    -webkit-border-radius: 5px 0px 0px 0px; 
    border-radius: 5px 0px 0px 0px; 
} 
.top-right-round{ 
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 5px; 
    -moz-border-radius-bottomright: 0px; 
    -moz-border-radius-bottomleft: 0px; 
    -webkit-border-radius: 0px 5px 0px 0px; 
    border-radius: 0px 5px 0px 0px; 
} 
table thead th{ 
    background: url(../images/table-header-bg.png) repeat-x; 
    height: 42px; 
    line-height: 40px; 
    border: 0px solid transparent; 
    font-weight:normal; 
} 
th.action_header span { 
    margin-right:50px; 
} 
th.action_header { 
    width: 120px; 
    text-align: left; 
    padding-left: 20px 
} 
th.action_header_short{ 
    padding-left: 20px; 
} 
th a.sortable,th.action_header span,th.action_header_short span { 
    color: #fff; 
    font-size: 15px; 
    font-weight: normal; 
    text-decoration: none; 
} 
th a.sortable{ 
    padding: 0 15px;  
    background: url(../images/icons/arrow_dwn.png) right center no-repeat; 
} 
th.sortable span{ 
    background: url(../images/cols-seperator.png) right top no-repeat; 
    float:right; 
    margin-right: -2px; 
    width:5px; 
    height: 42px; 
} 
th a:hover{ 
    color: #fff; 
} 

tbody td{ 
    padding: 0 5px; 
} 

td.action{ 
    width:74px; 
    padding: 2px; 
} 

.tableWrapper{ 
    border-bottom: 1px solid #E5E5E5; 
    padding-bottom: 8px; 
} 

Answer 1

イメージの代わりにCSSでスタイルを設定します。あなたはいつもこのようなイメージを使って問題を起こすでしょう。