2013-08-20 56 views
0

我使用span內部div來模擬整個div作爲一個鏈接。它在Chrome & FF上運行良好,但在IE中卻沒有。 我使用導入的字體(真棒字體)使主div上顯示一個圖標(在「之前」語句在CSS中)。該div看起來可以在圖標之前稍微點擊一下,稍微點擊即可。在FF和CHROM,該whoole圖標點擊...如何使它在IE工作...跨越div與.before錯誤與IE 10

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/

回答

0

找到的:

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