Question

这个问题只在IE中出现。请仅在IE中打开小提琴。

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

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

Answer 2

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

你可以做的是检测用户正在使用的浏览器

让css兼容

您可以使用以下代码

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

希望这可以提供帮助

Answer 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-block）覆盖第一个属性（inline）。

按钮内的文字闪烁

3 个答案: