0

大家好，今天我在使用 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 个 div 对齐在 5 个按钮上（活动的是绿色的）

每个 div 应该是空的，所以我使用了 10px 的填充来制作 20x20 的 div（如果你发现它为什么是 20x38 的话，可以加分）。周围的 div 是 100px 宽。

在除 IE9 之外的所有浏览器中，div 都非常好。然而，在 IE9 上，主 div 大约 14px 太高了。

我很久以前就想不出问题可能出在哪里了。

非常感谢您的每一点帮助和建议

4

2 回答 2

0

它们在 IE9 和 IE10 中对我来说看起来不错，但我建议使用width:20px;height:20px;display:inline-block而不是你的padding:10px技巧。

于 2013-01-30T21:11:40.093 回答
0

我最终在 div 上使用 position:absolute 。

这导致ie不点击div，除非里面有东西所以我放了一个字体大小：100px; 以便它填充 div。

于 2013-01-31T14:21:42.880 回答