IE浏览器 8 - CSS：IE8 中的小图标不会在段落分隔符处中断

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>

文本在"relevant"处中断并转到下一行，但图标没有随行移动。例如，图标不在"País"字样附近。例如，如果行没有断行，则图标设置非常好。

它适用于FF, Chrome, Opera, Safari…

有人知道如何正确地放置图标吗?提前感谢

Answer 1

您可以在a标签内添加span，并应用背景，参见: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中的"正确"行为，我有同样的问题，唯一的解决方案是简单地将不支持图标"包装"的浏览器的图标，并在第二行对齐结束的单词。

1. 如果你在条件注释中使用IEx样式表，那么你知道该怎么做。

2. 如果你正在使用我所说的"PICCH"(读作"皮卡丘")技术，那么你只需这样做:.ie8 .APm2 { background:none; }

3. 如果你不使用上述两个中的任何一个，只使用一个CSS文件，你可以这样做:.APm2/***/ { background:none; }。注意:如果你使用LESS来预处理你的CSS，这个hack将不起作用，LESS无法编译这个，这是一件好事。

4. 你也可以试试:.APm2 { background:none/; }。有些人会说你也可以这样做:.APm2 { background:none9; }，但问题是IE9和IE10也会看到它

查看更多IE6/7/8/9/10/11 CSS技巧:https://gist.github.com/ricardozea/5549389

天哪，我讨厌不得不求助于这些事情，但我们有时没有任何其他选择:/

同样，在您的代码中，.APm2和a.APm2是相同的，所以您不妨用所有这些属性制定一个规则。如果您打算这样做，我建议您使用.APm2，以便将来不会引起特异性问题。

希望对你有帮助。

(*)"皮卡丘"技术，PICCH，意思是:"保罗爱尔兰的条件注释在头部"，当然我们都知道自2008年以来:条件样式表vs CSS黑客?回答:没有!