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。

这导致即使没有点击div，除非它有什么东西所以我放了一个字体大小：100px;所以它填补了div。

在IE9中水平未对齐的div，在FF / IE8 / Chrome / Opera / Safari上很好

2 个答案: