IE7 Float left在新行上添加了元素

Question

这是html。

<h3 class="accordion-title">
     Lorem ipsum dolor sit amet. 
     <span class="accordion-title-icon plus"></span>
</h3>

这就是css。

.accordion-title {
    width: 540px;
    padding: 5px;
    margin: 0;
    background-image: none;
    font-weight: bold;
    color: #e1c58a;
    background-color: #2f2c27;
    border: 1px solid #433f38;
}

.accordion-title .accordion-title-icon {
    background-image: url('../img/accordion_icons.png');
    background-repeat: no-repeat;
    width: 11px;
    height: 11px;
    float: right;
    margin-top: 2px;
    margin-right: 2px;

}

.accordion-title .accordion-title-icon.plus {
    background-position: 0 0;
}

.accordion-title .accordion-title-icon.minus {
    background-position: -11px 0;
}

在Edge上可以正常工作，如下例所示：

但它在Internet Explorer 7上的新行中分解。

有什么想法吗？

更新

这很奇怪，如果我改变这样的html标记就行了：

<h3 class="accordion-title">
   <span class="accordion-title-icon plus"></span>
   Lorem ireum dolor sit amet.
</h3>

有更好的想法吗？

Answer 1

我假设丢弃IE7不是一个选项，所以这里有一些建议：

1. 尝试将span元素设置为var isSuit = function () { var standardSuites = ['hearts', 'clubs', 'spades', 'diamonds']; var question = prompt('which card do you have?'); var answer = question.toUpperCase(); for (var i = 0; i < standardSuites.length; i++){ if (answer === standardSuites[i]) { return true; } else { return false; } } }; 。

2. 或者你可以将图标作为一个块并将其移动到例如 float: left。

3. 其他解决方案需要将父级设置为相对定位，然后绝对移动图标：

   margin-top: -25px;