2

我有一个带有 Span 的 A 标签按钮来保存图标。它适用于所有浏览器。当我应用 float:right 将 Span 移到右侧时，它在除 IE7 之外的所有浏览器（Firefox、IE8+ 等）中也可以正常工作（我知道......但我需要修复它）。

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

因此，当 SPAN 向左浮动时，IE7 可以正常工作。但是，一旦它向右浮动，它就会将 A 标签容器拉伸 100%。

我不希望更改 HTML 的结构，即插入另一个跨度以仅处理 IE7 或将跨度移动到文本的右侧，但我确实想用 CSS 修复它，尽管我尝试的方法对我来说效果不佳。

测试用例： http: //jsfiddle.net/QeQSQ/1/（当 SPAN 位于左侧时，IE7 工作正常）

测试用例： http: //jsfiddle.net/QeQSQ/2/（IE7 不工作，因为 SPAN 在右侧并且容器正在拉伸）

4

2 回答 2

0

绝对定位它（示例）：

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伪元素添加字符（示例）：

<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-19T14:35:26.783 回答
0

删除 float:left 并使用 ie7 解决方法给 span display inline-block：

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 内联块解决方法的文章：http: //flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html

于 2012-07-19T14:41:20.123 回答