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并给它一个阴影。这样就不可能推动布局。