0

皆さん、こんにちは。今日は IE9 で問題が発生しました。IE9 以外はすべて動作します (IE10 の可能性もあり、テストするマシンはありません)。

コードは次のとおりです。

<!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 高すぎます。

ずっと前に、問題が何であるかについての考えが尽きました。

少しでも助けと提案をいただければ幸いです

4

2 に答える 2

0

divで position:absolute を使用することになりました。

これにより、div に何かがない限り、div をクリックしないようになりました。divを埋めるように。

于 2013-01-31T14:21:42.880 に答える
0

IE9 と IE10 では問題ないように見えますが、あなたのトリックwidth:20px;height:20px;display:inline-blockではなく使用することをお勧めします。padding:10px

于 2013-01-30T21:11:40.093 に答える