Question

我有一个我无法单独解决的问题。

我有这个CSS：

.APm2 {
    background: transparent url(images/arrow_h.gif) center right no-repeat;
    padding-right: 13px;
    zoom: 1;
}
a.APm2 {
    text-decoration: none;
    color: #000000 !important;
}
a.APm2:hover { 
    background: transparent url(images/arrow_h_over.gif) center right no-repeat;
}

HTML（部分：）

<strong>
    <a class="APm2" href="#H1" onClick="abre_fecha('H',1);CarregaLegendasFileAttr_UI_Ajax('H',1);">
        Pensão de Preço de Sangue e Pensão por Serviços Excecionais e Relevantes Prestados ao País
    </a>
</strong>
<p></p>

文本在“Relevantes”处中断并转到下一行，但图标不随行一起显示。即，图标不会靠近“País”这个词例如，如果该行没有中断，则图标设置得非常好。

适用于FF，Chrome，Opera，Safari ......它在IE中不起作用。

任何人都知道如何正确放置图标？提前致谢

Answer 1

您可以在span代码中添加a，然后将背景应用于该代码，请参阅：http://jsfiddle.net/g2nLV/2/

<strong>
    <a href="#H1" class="APm2" onClick="abre_fecha('H',1);CarregaLegendasFileAttr_UI_Ajax('H',1);">
    Pensão de Preço de Sangue e Pensão por Serviços Excecionais e Relevantes Prestados ao País <span class="APm2-icon"></span></a>
</strong>

使用这个CSS：

span.APm2-icon {
    /*obviously set the below background to your icon, not just a colour */
    background: green;
    /* same width and height as your icon dimensions*/
    width: 13px;
    height:13px;
    display: inline-block;
    zoom: 1;
}

a.APm2 {
    text-decoration: none;
    color: #000000 !important;
}

span.APm2-icon:hover { 
    background: red;
}

Answer 2

是的，这是IE8中的“正确”行为，我遇到了同样的问题，唯一的解决办法是简单地取出不支持图标'包装'的浏览器的图标并对齐到结尾第二行中的字。

如果您在条件评论中使用IEx样式表，那么您就知道该怎么做。
如果您正在使用我所说的*“PICCH”（阅读“皮卡丘”）技术，那么您只需：.ie8 .APm2 { background:none; }
如果您没有使用上述任何一种并且仅使用单个CSS文件，则可以执行：.APm2/*\**/ { background:none; }。注意：如果你使用LESS来预处理你的CSS，这个hack将无法正常工作，LESS无法编译它，这是一件好事。
您也可以尝试：.APm2 { background:none\0/; }。有些人会说你也可以这样做：.APm2 { background:none\9; }但问题是IE9和IE10也会看到它。

查看更多IE6 / 7/8/9/10/11此处的CSS黑客攻击：https://gist.github.com/ricardozea/5549389

伙计，我讨厌不得不求助于这些事情，但我们有时候没有其他选择：/

此外，在您的代码中.APm2和a.APm2是相同的，因此您可以使用所有这些属性制作单个规则。如果您打算这样做，我建议您使用.APm2，以免将来引发特异性问题。

希望这有帮助。

（*）“皮卡丘”技术，PICCH，意思是：“保罗爱尔兰人头脑中的条件评论”，我们自2008年以来都知道这一点：Conditional Stylesheets vs CSS Hacks? Answer: Neither!

CSS：在IE8的段落中，小图标不会中断

2 个答案: