ie 9 背景透明的空白元素无法点击

浏览器：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]-->