按钮内的文字闪烁答案

【问题标题】：The text inside the button flickers按钮内的文字闪烁
【发布时间】：2015-05-29 16:13:09
【问题描述】：

这个问题只在 IE 中。请仅在 IE 中打开 fiddle。

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;
}

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

这可以解决吗？

【问题讨论】：

嗯，按钮不会“闪烁”。按钮“向下”——看起来“按下”，就像在 Windows 95 / XP 中一样。
Prevent <button> from shifting during click in IE的可能重复

标签： html css

【解决方案1】：

key wrap的内容-添加position: relative; top: 0; left: 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;   
}

&lt;button class="Main_button find_button" type="submit"&gt;&lt;span &gt;Find&lt;/span&gt;&lt;span class="icon"&gt;&lt;/span&gt;&lt;/button&gt;

【讨论】：

【解决方案2】：

这是因为 IE 会读取我们在元素中应用的填充边距和其他测量值，这与 Chrome 和 Firefox 不同

你可以做的是检测用户使用的是什么浏览器

给它兼容的css

你可以使用下面的代码

<!--[if IE]>
<style type="text/css">
  IE specific CSS rules go here
</style>
<![endif]-->

希望对你有帮助

【讨论】：

【解决方案3】：

IE 不理解 inline-block 属性。

如果您需要.icon 成为inline-block，您可以使用这个技巧：

.icon {
    background:
    url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center;
    height: 10px;
    width: 18px;
    display: inline-block;
    *display: inline;
    margin: 5px 0px 0px 5px;
}

星号* 属性允许其他浏览器忽略该属性。相反，IE 会用最后一个属性 (inline) 覆盖第一个属性 (inline-block)。

【讨论】：