IE7 Float左侧添加了新行的元素

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元素设置为float: left 。

2. 或者，您也可以将图标作为一个块并向上移动，例如， margin-top: -25px; 。

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

    .accordion-title { position: relative ... } .accordion-title .accordion-title-icon { position: absolute; top: 2px; right: 2px ... }