CSS3陰影製作Td元素在IE移動

Question

好吧，我有一個超級簡單的網頁，它有一個表格，每個<td>標籤因缺少一個更好的術語而成爲「按鈕」。每個<td>標籤都有一個錨標籤，其中有兩個<div>標籤。我在每個<td>標記的懸停上設置了一個盒子陰影，以顯示您可以單擊鏈接以顯示更多信息的模式窗口。除了IE之外，所有瀏覽器中的所有內容都可以正常工作。我使用的是IE 9和box-shadow，但每次將鼠標懸停在<td>標籤上時，都會移動其他14個元素。我將爲第一個<td>元素提供我的代碼，但由於該網站位於本地服務器上的測試環境中，因此沒有鏈接。此頁面的樣式表也用於多個其他頁面，但我將只包含適用於此頁面的部分。歡呼聲，並提前感謝您的任何幫助。

#tblSuccess{margin: o auto; border-spacing: 15px;} 
.successTd{width: 140px; height: 180px;} 
.successTd:hover{filter: progid:DXImage.Transform.Microsoft.Shadow(color='#b0b0b0', Direction=135, Strength=7;} 
.imageDiv{padding-left: 7px; padding-bottom:7px; padding-right:7px; float:left; Width:142px; background-color:#E1913A;} 
.jobDiv{padding-left: 7px; padding-top: 7px; padding-right: 7px; padding-bottom: 1px; background-color: #EDBB7C; width: 142px; text-align: center; font-family: Verdana; font-size: 10pt; font-weight: bold; color: #000;} 
.modalH1{font-family: 'Nothing You Can Do', cursive; font-size: 18pt;} 
.modalP{font-family: Arial, Verdana; font-size: 12pt; color: #D66E27;} 
.modalH2{font-family: 'Nothing You Can Do', cursive; font-size: 11pt; color: #000;} 
.close{float:right; padding:10px 10px 0 0; 
/* Z-index of #mask must be lower than #boxes .window */ 
#mask{position:absolute; left:0; top:0; z-index:9000; background-color:#000; display:none;} 
#boxes .window{position:absolute; width:440px; height:200px; display:none; z-index:9999; padding:20px; border: solid 5px #FFAF3F;} 
/* Customize your modal window here */ 
#boxes #dialog1{width:425px; height:300px; background-color: #FBF4d8;} 

<table id="tblSuccess" cellspacing="15px"> 
    <tr id="Row1" style="width: 925px; height: 180px"> 
     <td class="successTd"> 
      <a href="#dialog1" name="modal" style="text-decoration: none"> 
       <div class="imageDiv"> 
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <span style="font-size: 10pt; 
         color: #FBF4D8; font-weight: bold;">Aaron C.</span><br /> 
        <img src="images/LandingPages/SuccessStories/AaronChapman-Cashier.jpg" alt="Aaron C" /> 
       </div> 
       <div class="jobDiv"> 
        Cashier 
       </div> 
      </a> 
      <div id="boxes"> 
       <div id="dialog1" class="window"> 
        <h1 class="modalH1"> 
         Aaron's story...</h1> 
        <p class="modalP" align="justify"> 
         I worked as a cash vault clerk before I got to Centriq. I always loved computers 
         and I wanted to make I.T. a career instead of just a hobby. A friend had gone through 
         the track here at Centriq and recommended it to me. The teachers were always willing 
         to answer any questions we had, and were always challenging us to rely on ourselves 
         and our colleagues. It is completely different than anything I have done before. 
         I loved every minute of it.</p> 
        <h2 class="modalH2" align="center"> 
         Track: IT Administrator</h2> 
        <h2 class="modalH2" align="center"> 
         Old Job: Cashier &nbsp&nbsp New Job: Computer Operator</h2> 
       </div> 
       <div id="mask"> 
        <a href="#" class="close"> 
         <img src="images/ModalXImage.jpg" alt="" /></a> 
       </div> 
      </div> 
     </td> 

Answer 1

我把上影內容的TD的，而不是TD本身。

另一種解決方法可能是在單元中放置一個絕對定位的DIV並給它一個陰影。這樣就不可能推動佈局。