Question

我试图在jsfiddle中显示这个，但不确定如何包含图像，所以希望只从代码中清楚这一点。我有以下HTML：

<ul class="tableview tableview-links results">
        <li>
      <a href="#search/1" class="pad-top has-popover js-show" data-container="body">
        <div class="story">
          <span class="metadata inline-block">
            <span class="link-text">Some Text</span>
          </span>
        </div>
      </a>
      <a href="#search/1" class="detail-disclosure has-popover js-show" data-container="body" >
        <span></span>
      </a>
    </li>
</ul>

以下css：

.tableview-links li>a.detail-disclosure span
{
    display: inline-block;
    width: 29px;
    height: 31px;
    background: transparent url(images/detail-disclosure-button.png);
    -webkit-background-size: 58px 31px;
    -moz-background-size: 58px 31px;
    -ms-background-size: 58px 31px;
    -o-background-size: 58px 31px;
    background-size: 58px 31px;
}

与详细信息披露范围关联的图像在<li>元素内部和“Some Text”右侧的chrome / firefox中正确显示，但在IE中，它显示在外部和下面线。

有没有办法解决这个问题在IE中工作，除此之外，任何方式都不能在IE中显示它？我尝试将其设置为在css文件中显示：none，然后将此css块移动到＆lt; - if！IE - ＆gt;在css链接之后阻塞，但是它隐藏在IE和其他浏览器中。

谢谢！

Answer 1

@sydneyos，谢谢。你可以尝试将div.story设置为内联块吗？

我没有Windows机器，所以我无法测试。

或者，如果您想为IE应用一些特殊的CSS，请查看以下示例：

<!doctype html>
<!--[if IE 7 ]> <html class="no-js ie ie7 lte7 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie ie8 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js ie ie9 lte9>" lang="en-US"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="en-US"> <!--<![endif]-->

＆lt; - if！IE - ＆gt;我恐怕不应该在很多浏览器中工作。

IE没有正确显示标签内的跨度

1 个答案: