Internet Explorer text above absolute positioned link
Question
I have created a list of boxes with text inside that are clickable, however IE sets the text above the link, so when hovering over the text it prioritizes it making the link no longer work. Chrome + Firefox work as intended.
Also I would like to see if a fix is possible without the use of javascript or jQuery, if possible. I also need it to support IE8+.
Here is the 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;
}
1 answers
solution1
3 ACCPTED 2013-02-22 22:24:43
This is a bug in IE with absolute positioned anchor elements.
The most common workaround is to set a background to the anchor. However, since you obviously don't want the link to hide the text below it, you'll need to set a transparent background image. In order to do that, I usually prefer to set the background to an existing path that would serve as an invalid image.
For example:
a {
position:absolute;
/* ... */
background:url('about:blank');
}
See jsFiddle demo
Alternatively, you can also create an actual transparent image and set it as the background.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.