2012-12-06 72 views
1

我在表格單元格內有一個錨點元素。錨點需要重疊後續單元格,但不能在表格外部或包含div。使用CSS隱藏IE7中溢出的表格單元格內容

HTML

<div> 
    <table> 
    <tbody> 
     <tr> 
     <th><span>Volkswagen Crafter CR30 SWB Diesel 2.5 BlueTDI 88PS Van</span> BF60GKK <br>updated 06 dec 17:49</th> 
     <td>a</td> 
     <td>z</td> 
     <td>b</td> 
     <td>c</td> 
     <td>y</td> 
     <td>x</td> 
     <td><a style="width: 237.5%;left:37.5%" href="#"><span>John Smith, Provisional<br/>09:00 on 12 Dec<br/>18:00 on 14 Dec</span></a></td> 
     <td>g</td> 
     </tr> 
    </tbody> 
    </table> 
</div>​ 

CSS

div {overflow:hidden;display:inline-block;position:relative} 
th,td {border:1px solid black; border-collapse:collapse; position:relative; width:50px; } 
th {width:150px;} 
td.d {background-color:#cdc;} 
a {z-index:1000;position:absolute;width:300px;top:15px;left:5px;height:60px;overflow:hidden;background:#fdd;} 

這工作在Chrome,IE8和IE9 ...

Correct rendering in Chrome

但不是在IE7 ...

Incorrect rendering in IE7

我該如何在IE7中進行這項工作?

這裏http://jsfiddle.net/UrZDw/

另請參見工作示例,IE7也使它們具有背景色細胞背後的錨。我怎樣才能解決這個問題?

+0

試試這個http://code.google.com/p/ie7-js/ – raym0nd

+0

謝謝@ raym0nd - 似乎並沒有解決它。 – matharden

回答

0
table { overflow: hidden; } 

然後你td旨意繼承,所以你需要明確設置:

table td { overflow: visible; } 
+0

謝謝@wanovak,但不幸的是沒有奏效。我在這裏嘗試過http://jsfiddle.net/UrZDw/1/ – matharden