<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中伸展容器

回答

相关问题