html - 按钮内的文字闪烁

Question

这仅在 IE 中存在。请仅在 IE 中打开 fiddle。

https://jsfiddle.net/hfmn6axh/

html:

<button class="Main_button find_button" type="submit">Find<span   class="icon"></span></button>

CSS:

.Main_button{
background-color: #747474;
}
.find_button {
display: inline;
padding: 7px 10px;
padding-top: 4px;
color: white;
float: left;
line-height: 25px;
font-size: 13px;
font-weight: bold;
padding-right: 10px;
border: solid 0px;
height: 33px;
}
.icon {
background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center; 
height: 10px;
width: 18px;
display: inline-block;
margin: 5px 0px 0px 5px;
}

当您点击按钮时，按钮的内容会改变其对齐方式。

这能解决吗？

Answer 1

键换行的内容——添加position: relative;顶部:0；左:0；

.Main_button{
    background-color: #747474;
}
.find_button {
    display: inline-block;
    padding: 7px 10px;
    padding-top: 4px;    
    color: white;
    float: left;
    line-height: 25px;
    font-size: 13px;
    font-weight: bold;
    padding-right: 10px;
    border: solid 0px;
    height: 33px;     
}
.icon {
    background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center; 
    height: 10px;
    display: inline-block;
    width: 18px;    
    margin: 5px 0px 0px 5px;
}
span{   
    position: relative; top: 0; left: 0;   
}

<button class="Main_button find_button" type="submit"><span >Find</span><span class="icon"></span></button>