跨度顯示IE

Question

我寫了這個代碼，它與過渡

.pictos { 
 
    display: block; 
 
    height: 70px; 
 
    margin: 160px 0 30px; 
 
    padding: 0 17%; 
 
    width: 100%; 
 
} 
 
.pictos > div { 
 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2); 
 
    border: 1px solid #fff; 
 
    border-radius: 50%; 
 
    display: table-row; 
 
    float: left; 
 
    height: 70px; 
 
    width: 70px; 
 
    margin: 0 0 0 50px; 
 
} 
 

 
/* new stuff: */ 
 
.pictos a.standard { 
 
    background-repeat: no-repeat; 
 
    background-color: rgba(255, 255, 255, 1); 
 
    /* set two background images: */ 
 
    background-image: url("http://s11.postimg.org/91k4hiqe7/standard.png"), 
 
        url(http://s30.postimg.org/3l9qho5h9/standard_hover.png); 
 
    /* set positioning for them both individually: */ 
 
    background-position: 50% 50%, 50% 39px; 
 
} 
 
.pictos a.standard:hover, 
 
.pictos a.standard:focus { 
 
    /* when hovering, change background-color and both of the background-positions: */ 
 
    background-color: rgba(120, 182, 55, 1); 
 
    background-position: 50% -39px, 50% 50%; 
 
} 
 
/* end of new stuff, removed some other unnecessary rules also*/ 
 

 
.pictos > div a { 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    height: 45px; 
 
    margin: 12px; 
 
    text-decoration: none; 
 
    text-indent: -9999px; 
 
    transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s; 
 
    width: 45px; 
 
} 
 
.pictos a.standard:hover span, 
 
.pictos a.standard span:hover, 
 
.pictos a.standard span:focus, 
 
.pictos a.standard:focus span { 
 
    display: block; 
 
    opacity: 1; 
 
} 
 
.pictos a span::after { 
 
    -moz-border-bottom-colors: none; 
 
    -moz-border-left-colors: none; 
 
    -moz-border-right-colors: none; 
 
    -moz-border-top-colors: none; 
 
    border-color: #78b637 rgba(120, 182, 55, 0) rgba(120, 182, 55, 0); 
 
    border-image: none; 
 
    border-style: solid; 
 
    border-width: 6px; 
 
    content: " "; 
 
    height: 0; 
 
    left: 50%; 
 
    margin-left: -6px; 
 
    pointer-events: none; 
 
    position: absolute; 
 
    top: 100%; 
 
    width: 0; 
 
} 
 
.pictos a span { 
 
    background: none repeat scroll 0 0 #78b637; 
 
    border: medium none; 
 
    border-radius: 9px; 
 
    bottom: 50px; 
 
    color: #efefef; 
 
    font-family: "Montserrat-Regular", sans-serif; 
 
    font-size: 13px; 
 
    padding: 5px 0; 
 
    position: relative; 
 
    right: 77px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    text-indent: 0; 
 
    text-transform: uppercase; 
 
    width: 200px; 
 
}

<div class="pictos"> 
 
    <div> 
 
    <a href="#" class="standard"> 
 
     <span>standard</span> 
 
    </a> 
 
    </div> 
 
</div>

它完全在Chrome，火狐，歌劇，但不能在IE瀏覽器IE，甚至邊緣的鏈接。

我知道這個問題是在此代碼

.pictos a.standard:hover span, 
.pictos a.standard span:hover, 
.pictos a.standard span:focus, 
.pictos a.standard:focus span { 
    display: block; 
    opacity: 1; 
} 

但我不知道如何在IE

感謝您的幫助解決這個問題！

Answer 1

在IE中的問題似乎是由於.pictos a span是position: relative;。這可以固定由從文檔流中去除它利用position: absolute;代替：

• 添加position: relative;到.pictos > div a對.pictos a span
• 的span相對於它
• 變化position: relative;到position: absolute;定位修改bottom和right對.pictos a span進行相應定位
• 將display: none;添加到.pictos a span將其隱藏起來直到盤旋

.pictos { 
 
    display: block; 
 
    height: 70px; 
 
    margin: 160px 0 30px; 
 
    padding: 0 17%; 
 
    width: 100%; 
 
} 
 
.pictos > div { 
 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2); 
 
    border: 1px solid #fff; 
 
    border-radius: 50%; 
 
    display: table-row; 
 
    float: left; 
 
    height: 70px; 
 
    width: 70px; 
 
    margin: 0 0 0 50px; 
 
} 
 
/* new stuff: */ 
 

 
.pictos a.standard { 
 
    background-repeat: no-repeat; 
 
    background-color: rgba(255, 255, 255, 1); 
 
    /* set two background images: */ 
 
    background-image: url("http://s11.postimg.org/91k4hiqe7/standard.png"), url(http://s30.postimg.org/3l9qho5h9/standard_hover.png); 
 
    /* set positioning for them both individually: */ 
 
    background-position: 50% 50%, 50% 39px; 
 
} 
 
.pictos a.standard:hover, 
 
.pictos a.standard:focus { 
 
    /* when hovering, change background-color and both of the background-positions: */ 
 
    background-color: rgba(120, 182, 55, 1); 
 
    background-position: 50% -39px, 50% 50%; 
 
} 
 
/* end of new stuff, removed some other unnecessary rules also*/ 
 

 
.pictos > div a { 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    height: 45px; 
 
    margin: 12px; 
 
    text-decoration: none; 
 
    text-indent: -9999px; 
 
    transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s; 
 
    width: 45px; 
 
    position: relative; 
 
} 
 
.pictos a.standard:hover span, 
 
.pictos a.standard span:hover, 
 
.pictos a.standard span:focus, 
 
.pictos a.standard:focus span { 
 
    display: block; 
 
    opacity: 1; 
 
} 
 
.pictos a span::after { 
 
    -moz-border-bottom-colors: none; 
 
    -moz-border-left-colors: none; 
 
    -moz-border-right-colors: none; 
 
    -moz-border-top-colors: none; 
 
    border-color: #78b637 rgba(120, 182, 55, 0) rgba(120, 182, 55, 0); 
 
    border-image: none; 
 
    border-style: solid; 
 
    border-width: 6px; 
 
    content: " "; 
 
    height: 0; 
 
    left: 50%; 
 
    margin-left: -6px; 
 
    pointer-events: none; 
 
    position: absolute; 
 
    top: 100%; 
 
    width: 0; 
 
} 
 
.pictos a span { 
 
    background: none repeat scroll 0 0 #78b637; 
 
    border: medium none; 
 
    border-radius: 9px; 
 
    bottom: 75px; 
 
    color: #e5efef; 
 
    font-family: "Montserrat-Regular", sans-serif; 
 
    font-size: 13px; 
 
    padding: 5px 0; 
 
    position: absolute; 
 
    right: 50%; 
 
    margin-right: -100px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    text-indent: 0; 
 
    text-transform: uppercase; 
 
    width: 200px; 
 
    display: none; 
 
}

<div class="pictos"> 
 
    <div> 
 
    <a href="#" class="standard"> 
 
     <span>standard</span> 
 
    </a> 
 
    </div> 
 
</div>