<span>使用{float：right]標記在IE7中伸展容器

我有一個帶有內部Span的圖標的A標籤按鈕。它適用於所有瀏覽器。當我使用float：右移span到右側時，它在所有瀏覽器（Firefox，IE8 +等）中都能正常工作，除了IE7（我知道......但我需要修復它）。<span>使用{float：right]標記在IE7中伸展容器

<a href="#"><span>&nbsp;</span>Link</a>

因此，當SPAN向左浮動時，IE7可以正常工作。但是，一旦它正確地浮動，它將A標籤容器拉伸100％。

我不希望更改HTML的結構，即插入另一個跨度以僅處理IE7或移動SPAN右側的文本，但我想用CSS修復它，儘管我嘗試過的操作對我來說還不夠好。

測試用例：http://jsfiddle.net/QeQSQ/1/（IE7工作確定當SPAN是左側）

測試用例：http://jsfiddle.net/QeQSQ/2/（IE7不工作，因爲SPAN是在右側，容器被拉伸）

來源

2012-07-19 Vad

嘗試添加溢出：對您的標記可見。適用於彈性按鈕錯誤，不確定它會修復這個問題 – Turnip 2012-07-19 14:36:17

位置它絕對代替（example）：

a{ 
    display:inline-block; 
    border:1px solid red; 
    height:auto; 
    width:auto; 
    padding:5px; 
    position:relative; 
    padding-right:1em; 
} 
a span{ 
    position:absolute; 
    right:0; 
    display:block; 
    height:14px; 
    width:15px; 

}

或者，另一[更好]的解決辦法是通過:before和:after僞元素添加的字符（example）：

<a href="#" class="site">Link</a> 
<a href="#" class="account">Link</a>

a{ 
    display:inline-block; 
    border:1px solid red; 
    height:auto; 
    width:auto; 
    padding:5px; 
} 
a.site:before { 
    content:"» "; 
} 
a.account:after { 
    content:" »"; 
}

注：這並不在IE7在所有的工作（沒有出現額外的文本），但它也不會引入任何錯誤。

來源

2012-07-19 14:35:26 0b10011

去除浮動：左，而是給跨度顯示inline-block的與IE7的解決方法：

a{ 
    display:inline-block; 
    border:1px solid red; 
    height:auto; 
    width:auto; 
    padding:5px; 
} 


a span{ 
    display:inline-block; 
    zoom:1; 
    *display: inline; 
    height:14px; 
    width:15px;  
}

更新小提琴這裏：http://jsfiddle.net/QeQSQ/5/

還對IE7 inline-block的解決方法的文章：http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html

來源

2012-07-19 14:41:20 styler

<span>使用{float：right]標記在IE7中伸展容器

回答

相關問題