IE7以不同的方式顯示錶格標題

我有一個標題表，每個標題包含一個跨度，它具有一個背景圖像，我用它作爲th之間的一個語言。IE7以不同的方式顯示錶格標題

在所有瀏覽器上它都會顯示，但在IE7上，底部顯示了分隔符圖像（這是帶背景的區域）。

好（IE8 +，Chrome瀏覽器，FF）：

enter image description here

壞（IE7）：

enter image description here

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; 
}

來源

2011-12-25 Tomer

爲什麼你不能只用CSS來設計標題？使用具有背景和一些線條的圖像看起來很愚蠢。 – Bojangles 2011-12-25 11:51:43

我接受了你的建議，並用簡單的css爲IE7設計了它。謝謝。 – Tomer 2011-12-25 12:23:06

使用CSS代替圖像進行設置。使用這樣的圖像總是會遇到問題。

來源

2011-12-26 00:55:11

IE7以不同的方式顯示錶格標題

回答

相關問題