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