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放在细胞中并给它阴影。这样就不太可能轻推布局。

CSS3投影在IE Shift中制作Td元素

1 个答案: