CSS3 Drop Shadow Создание элементов Td в IE Shift

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

Я бы поставил тень на содержимом ТД, а не на самом ТД.

Другой обходной путь может заключаться в том, чтобы поместить в ячейку абсолютно позиционированный DIV и дать ему тень. Таким образом, это вряд ли подтолкнет макет.