ie 9 背景透明的空白元素無法點選

Doyle發表於2018-07-10

瀏覽器：IE 9
程式碼：

<style>
    .container {
        position: relative;
        width: 35%;
        margin: 300px auto;
    }


    .box {
        position: relative;
        z-index: 1;
        width: 100px;
        min-height: 200px;
        border: 1px solid #979797;
        text-align: center;
        cursor: pointer;
    }

    .canvas-box {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
    }
</style>
<div class="container">
    <div class="box">
        <p>文字</p>
    </div>
    <canvas class="canvas-box"
        width="660"
        height="218"></canvas>
</div>

問題描述：發現只能點選 “文字” 和圖片，空白部分則無法點選（也可以通過觀察滑鼠有無變成手型）。

解決過程：一開始以為是定位問題，被其他層擋住。canvas-box 的 z-index 調低，把 box 的 z-index 調高，也不能解決問題。後來才想起搜尋下 ie 9 的空白區域無法點選。才發現 ie 9 下可能背景空白的元素是有些坑的，網上的方法就是加背景就行了。

解決方法：

<!--[if lte IE 9]>
    <style>
        .box {
            background-image: url(.);
            // 或者
            // background:url(about:blank);
        }
    </style>
<![endif]-->

相關文章