Question

我有一个带有Span的A标签按钮，用于存放图标。它适用于所有浏览器。当我申请浮动时：右移将Span移到右侧它在所有浏览器（Firefox，IE8 +等）中也能正常工作，除了IE7（我知道......但我需要修复它）。

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

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

我不希望改变HTML的结构，即插入另一个跨度来处理IE7或者移动SPAN右侧的文本，但我确实想用CSS修复它，虽然我尝试过但对我来说效果不好。

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

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

Answer 1

绝对定位（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中根本不起作用（不会出现其他文字），但也不会引入任何错误。

Answer 2

删除float：left，而是使用ie7解决方法为span显示内联块：

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

带有{float：right]的<span>标签在IE7中拉伸容器</span>

2 个答案: