Internet Explorer文本位於絕對定位鏈接之上

Question

我已經創建了一個包含文本的框的列表，可以點擊，但IE將文本設置在鏈接上方，因此當將鼠標懸停在文本上時，它會優先處理它，使鏈接不再起作用。 Chrome + Firefox按預期工作。

另外，我想看看是否可以在不使用javascript或jQuery的情況下進行修復，如果可能的話。 我還需要它來支持IE8 +。

這是jsfiddle 。

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演示

或者，您也可以創建實際的透明圖像並將其設置為背景。

Internet Explorer文本位於絕對定位鏈接之上

問題描述

1 個解決方案

解決方案1
3 已采納 2013-02-22 22:24:43

Internet Explorer文本位於絕對定位鏈接之上

問題描述

1 個解決方案

解決方案1 3 已采納 2013-02-22 22:24:43

解決方案1
3 已采納 2013-02-22 22:24:43