Question

我创建了一个包含文本的框列表，可以点击，但是IE将文本设置在链接上方，因此当将鼠标悬停在文本上时，它会优先处理它，使链接不再起作用。 Chrome + Firefox按预期工作。

另外，如果可能的话，我想看看是否可以在不使用javascript或jQuery的情况下进行修复。我还需要它来支持IE8 +。

HTML：

<!DOCTYPE html>
<html>

    <body>
        <ul class="container">
            <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                    tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                    dictum lacinia.</p>
              </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>CLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
                <li class="optionBox"> <i class="reporting"></i>
    <a href="#">Lorem ipsum dolor sit amet.</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
                        tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
                        dictum lacinia.</p>
                </li>
        </ul>
    </body>

</html>

CSS：

.container {
    overflow: hidden;
    width: 1000px;
    list-style: none;
    margin: 15px;
    padding: 0;
}
.optionBox {
    float: left;
    overflow: hidden;
    width: 400px;
    height: 125px;
    cursor: pointer;
    margin: 0.3em;
    padding: 0.5em 0.5em 2em 0.5em;
    color: #555;
    background: transparent;
    border: solid 1px #DDD;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .1);
    box-shadow: 0 0 4px rgba(0, 0, 0, .1);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.reporting {
    position: absolute;
    background:url('http://s13.postimage.org/w73u674ur/icon.png') no-repeat;
    float: left;
    width:30px;
    height:30px;
}
a {
    position: absolute;
    width: 340px;
    height: 115px;
    font-size: 1.2em;
    padding-left: 3.8em;
    color: #08C;
    text-decoration: none;
}
a:hover{
    text-decoration:underline;
}
p {
    font-size: 1.2em;
    margin: 1.6em 0 0 3.8em;
}
body {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 20px;
    color: #333;
}

Answer 1

这是IE中存在绝对定位锚元素的错误。

最常见的解决方法是为锚点设置背景。但是，由于您显然不希望链接隐藏其下方的文本，因此您需要设置透明背景图像。为了做到这一点，我通常更喜欢将背景设置为可用作无效图像的现有路径。

例如：

a {
    position:absolute;
    /* ... */
    background:url('about:blank');
}

参见 jsFiddle demo

或者，您也可以创建实际的透明图像并将其设置为背景。

Internet Explorer文本位于绝对定位链接之上

1 个答案: