почему четыре кнопки не совпадают в IE?

Question

Итак, у меня есть эта страница , и если вы посмотрите на 4 кнопки «Взять тест-драйв» «Опции сдачи в аренду» ext ... Они не совпадают с нижней частью div вIE.В Firefox это выглядит нормально ... здесь HTML

<div class="main-img-box">
                <img alt="Retail POS Systems" src="/images/software/video_pos_software.png">
                <div class="main-cont-software">
                <a href="/downloads/video_vision_download.php" class="video-testdrive rest_icons"><span></span></a>
 <a href="/lease" class="video-lease rest_icons"><span></span></a>
<a href="javascript:addBookmark('POSNation.com%20-%20Video%20Rental%20POS%20Systems',window.location);" class="video-bookmark rest_icons"><span></span></a>
<a href="/shop_pos/index.php?route=information/contact" class="video-ask rest_icons"><span></span></a>                  </div>
            </div>

Вот некоторые из соответствующих CSS

            .main-img-box {
                height: 398px;
                position: relative;
                width: 100%;
            }

            .main-cont-software {
                bottom: 0;
                color: #FFFFFF;
                height: 76px;
                left: 14px;
                position: absolute;
                width: 100%;
            }

            .video-testdrive {
                background: url("../images/software/pos-sw-btn-video-testdrive.png") repeat scroll 0 0 transparent;
                display: inline-block;
                height: 57px;
                margin-right: 9px;
                width: 169px;
            }

            .video-lease {
                background: url("../images/software/pos-sw-btn-video-lease.png") repeat scroll 0 0 transparent;
                display: inline-block;
                height: 57px;
                margin-right: 9px;
                width: 169px;
            }

Любые идеи о том, что мне не хватает

ТакжеЕсть хороший инструмент для тестирования IE .. я использую firebug на firefox, и он прекрасно работает, но у меня всегда есть трудные времена с IE .. там тоже есть предложения

Answer 1

Вам необходимо добавить vertical-align: top .. еще раз .

.main-cont-software a {
    vertical-align: top;
}

Дополнительная информация:

• http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
• http://www.brunildo.org/test/inline-block.html

---

Также есть хороший инструмент для тестирования IE .. я использую firebug на firefox, и он отлично работает, но у меня всегда есть жесткийвремя с IE .. любые предложения там также

На сегодняшний день лучшим вариантом являются встроенные (для IE8 +) средства разработчика (нажмите F12).

Если вы хотитеиспользуйте их при тестировании в IE6 / 7, вы должны загрузить его .Хотя для IE7 вы можете просто использовать режим совместимости в IE8 / 9 для тестирования.