Question

我在div中使用span来模拟整个div作为链接。它适用于Chrome＆amp; FF，但在IE中，它没有。我使用导入的字体（真棒字体）使主div上出现一个图标（在css中使用“before”语句）。 div似乎只是稍微点击一下，只是在图标后面一点点。在FF和Chrom中，whoole图标是可点击的...如何让它在IE中工作？...

的CSS：

.tiremenuadmin{
font-family: 'fontawesome';
display: block;
font-size: 30px;
text-shadow: 0px 0px 7px #000000;
padding: 7px;
float: right;
width: 46px;
text-align: center;
margin: 7px 7px 0 0;
background-color: #364f71;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
cursor: pointer;
opacity: 0.7;
}
.tiremenuadmin:before{
    content: "\F013";
}
.menuadmin{
position: relative;
display: block;
width: 100%;
height: 50px;
font-size: 24px;
font-weight: bold;
color: #677889;
text-shadow: 1px 1px 0 #FFFFFF;
}
.enveloppe_menuadmin{
left: 50%;
margin-left: -10px;
margin-top: -70px;
width: 486px;
height: 50px;
position: fixed;
background: #364f71;
z-index: 100;
padding: 10px 12px 10px 10px;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
}
.align_menuadmin{
    left: -50%;
}
.cover_admin{
    background: #364f71;
float: right;
width: 79px;
height: 8px;
left: 418px;
position: absolute;
}
.env_menuadmin{
    width:100%;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: #f3f3f3;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #d6d6d6;
border-bottom: 1px solid #d6d6d6;
}
.adminmenu, .adminmenu_0, .adminmenu_1, .adminmenu_2, .adminmenu_3, .adminmenu_4, .adminmenu_5, .adminmenu_6, .adminmenu_7{
position: relative;
float: left;
height: 21px;
padding: 14px 15px 15px 15px;
font-family: 'fontawesome';
}
.adminmenu_00{
    position: relative;
float: left;
height: 21px;
padding: 14px 15px 15px 15px;
font-family: 'fontello-home';
font-size: 21px;
top: 1px;
}
.adminmenu_0, .adminmenu_1, .adminmenu_2, .adminmenu_3, .adminmenu_5, .adminmenu_6, .adminmenu_7 {
    border-left:1px solid #fff;
    border-right:1px solid #d6d6d6;
}
.adminmenu_00{
    border-right:1px solid #d6d6d6;
}
.adminmenu_4{
    border-left:1px solid #fff;
}
.adminmenu_0:before{
    content: "\F007";
}
.adminmenu_00:before{
    content: "\E0E0";
}
.adminmenu_1:before{
    content: "\F085";
}
.adminmenu_2:before{
    content: "\F0E0";
}
.adminmenu_3:before{
    content: "\F059";
}
.adminmenu_4:before{
    content: "\F011";
}
.adminmenu_5:before{
    content: "\F0C1";
}
.adminmenu_6:before{
    content: "\F15C";
}
.adminmenu_7:before{
    content: "\F055";
}
.adminmenu_1 span, .adminmenu_2 span, .adminmenu_3 span, .adminmenu_4 span, .adminmenu_5 span, .adminmenu_6 span, .adminmenu_7 span, .adminmenu_0 span, .adminmenu_00 span {
position: absolute;
width: 100%;
height: 50px;
right: 0px;
top: 0;
z-index: 1000;
}
.adminmenu:hover, .adminmenu_00:hover, .adminmenu_0:hover, .adminmenu_1:hover, .adminmenu_6:hover, .adminmenu_7:hover, .adminmenu_2:hover, .adminmenu_3:hover, .adminmenu_4:hover, .adminmenu_5:hover{
color:#7D92A7;
}

HTML：

<div class="enveloppe_menuadmin" style="opacity: 1; margin-top: -15px;">
    <div class="align_menuadmin">

    <div class="env_menuadmin">
    <div class="menuadmin">
        <div class="adminmenu_00"><a href="/bgladm"><span></span></a></div>
        <div class="adminmenu_0"><a href="/bgladm-compte"><span></span></a></div>
        <div class="adminmenu_1"><a href="/bgladm-options"><span></span></a></div>
        <div class="adminmenu_5"><a href="/bgladm-abo"><span></span></a></div>
        <div class="adminmenu_2"><a href="/bgladm-notif"><span></span></a></div>
        <div class="adminmenu_6"><a href="/bgladm-fic"><span></span></a></div>
        <div class="adminmenu_7"><a href="/bgladm-vip"><span></span></a></div>
        <div class="adminmenu_3"><a href="/bgladm-aide"><span></span></a></div>
        <div class="adminmenu_4"><a href="/logout"><span></span></a></div>
    </div>
    </div>

    <div class="tiremenuadmin" style="opacity: 1;"></div>
    <div class="cover_admin"></div>
    </div>
    </div>

演示：http://jsfiddle.net/namkc/

Answer 1

找到：

<a href="/bgladm"><div class="adminmenu_00"><span></span></div></a>

用IE浏览器中的.before错误

1 个答案: