div 内で span を使用して、div 全体をリンクとしてシミュレートします。Chrome と FF では問題なく動作しますが、IE では動作しません。インポートしたフォント (素晴らしいフォント) を使用して、メインの div にアイコンを表示します (css の「before」ステートメントを使用)。div は、アイコンの少し前と少し後にクリックできるように見えます。FF と Chrom では、全体のアイコンをクリックできます... 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>