IE9中水平未對齊的div，而在FF / IE8 / Chrome / Opera / Safari中很好

Question

大家好，我今天在IE9上遇到了麻煩，除IE9以外，其他所有功能都可以使用（可能還有IE10，沒有要測試的機器）

這是代碼： JsFiddle

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
    <title>Titre</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style type="text/css">
        .carouselNav {
            position: absolute;
            z-index: 9998;
            top: 92px;
            right: 300px;
            width:100px;
        }
        .carouselNav div {
            padding:10px;
            display:inline;
        }
        .carouselNav span {
            padding-right:15px;
        }
        .carousel {
            position:relative;
        }
    </style>
</head>

<body>
    <div class="carousel" style="overflow: visible;">
        <div class="carouselMedia"> <a href="http://extranet.achaplus.local/~apouliot_site_1284/fr/solutions.php?solution=phone_ip"><img id="carousel_img_item_1" src="http://achatplus.com/static/template/style1/img/header/slide1_phone_ip_fr.jpg" alt=""/></a>

            <a
            href="http://extranet.achaplus.local/~apouliot_site_1284/fr/solutions.php?solution=mobility">
                <img id="carousel_img_item_2" style="display: none;" src="http://extranet.achaplus.local/~apouliot_site_1284/static/template/style1/img/header/slide2_mobility_fr.jpg"
                alt="" />
                </a> <a href="http://extranet.achaplus.local/~apouliot_site_1284/fr/solutions.php?solution=shipping"><img id="carousel_img_item_3"  style="display: none;" src="http://extranet.achaplus.local/~apouliot_site_1284/static/template/style1/img/header/slide3_shipping_fr.jpg" alt=""/></a>

                <a
                href="http://extranet.achaplus.local/~apouliot_site_1284/fr/solutions.php?solution=office">
                    <img id="carousel_img_item_4" style="display: none;" src="http://extranet.achaplus.local/~apouliot_site_1284/static/template/style1/img/header/slide4_office_fr.jpg"
                    alt="" />
                    </a> <a href="http://extranet.achaplus.local/~apouliot_site_1284/fr/solutions.php?solution=internet"><img id="carousel_img_item_5" style="display: none;" src="http://extranet.achaplus.local/~apouliot_site_1284/static/template/style1/img/header/slide5_internet_fr.jpg"alt=""/></a>

        </div>
        <div class="carouselNav">
            <div id="item_1" title="1" class=""></div>
            <div id="item_2" title="2" class=""></div>
            <div id="item_3" title="3" class=""></div>
            <div id="item_4" title="4" class=""></div>
            <div id="item_5" title="5" class=""></div>
        </div>
    </div>
</body>

好的，所以有一個圖像，並且在5個按鈕上對齊了5個div（活動的一個是綠色的）

每個div應該都是空的，因此我使用10px的填充來制作20x20的div（如果發現為什么是20x38，則可以得到加分）。 周圍的div寬度為100px。

在除IE9之外的所有瀏覽器中，div都很好。 但是在IE9上，主要div大約過高了14px。

對於很久以前的問題，我沒有想法。

非常感謝您的幫助和建議

Answer 1

它們在IE9和IE10中對我來說看起來不錯，但我建議您使用width:20px;height:20px;display:inline-block而不是padding:10px技巧。

Answer 2

我最終在div上使用position：absolute。

這導致ie除非有任何東西，否則不對div進行點擊，因此我將其與font-size：100px;放在一起。 使它充滿div。

IE9中水平未對齊的div，而在FF / IE8 / Chrome / Opera / Safari中很好

問題描述

2 個解決方案

解決方案1
0 2013-01-30 21:11:40

解決方案2
0 已采納 2013-01-31 14:21:42

IE9中水平未對齊的div，而在FF / IE8 / Chrome / Opera / Safari中很好

問題描述

2 個解決方案

解決方案1 0 2013-01-30 21:11:40

解決方案2 0 已采納 2013-01-31 14:21:42

解決方案1
0 2013-01-30 21:11:40

解決方案2
0 已采納 2013-01-31 14:21:42