CSS3 Drop Shadow 在 IE Shift 中制作 Td 元素

Question

好的，所以我有一个 super 简单的网页，上面有一个表格，每个 <td>由于缺乏更好的术语，标签是“按钮”。每个<td>标签有一个带有两个 <div> 的 anchor 标签它里面的标签。我在每个 <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 并为其添加阴影。这样就不太可能微调布局。