Question

我有3个由文本和图像组成的链接，除IE 8兼容模式外，它可以在任何地方使用。我被告知该应用程序的用户使用IE 8兼容模式，因此它必须在该浏览器环境中工作。问题是图像正在下降到下一行。

以下是它应该是什么样子： http://i.imgur.com/2vAAH.png

以下是IE 8兼容模式下的内容： http://i.imgur.com/VHtQm.png

这是它在屏幕上下文中的样子： http://i.imgur.com/FZNxt.png

我能够在jsfiddle中重现问题： http://jsfiddle.net/dmase05/C6etX/

该网站正在使用Twitter Bootstrap，因此我将其中一些类用于网格和浮动。

让我更难以排除故障的一件事是，我发现在IE 8中运行IE 9兼容模式的兼容模式显示问题，但是，在IE 8兼容模式下运行IE 10看起来是正确的。我没有访问本机IE 8安装，但我被告知它看起来很好。

这是HTML（使用Bootstrap CSS）：

    <div id="divCalendarFooter">
        <div class="row">
             <div class="span3 pull-right">
                <a id="lnkSelectColumns" href="#" role="button" data-toggle="modal" class="pull-right">
               Choose Columns &nbsp;<img src="http://db.tt/cEFFCjw0"/>
                </a>
            </div>
        </div>
        <div class="row">
            <div class="span3 pull-right">
                <a href="#" class="pull-right">
                    Print Calendar &nbsp;<img src="http://db.tt/u94nalQx"/>
                </a>
            </div>
        </div>
        <div class="row">
            <div class="span4 pull-right">
                <a id="aShowPrintByDateRange" href="#" class="pull-right">
                   Print Calendar By Date Range &nbsp;<img src="http://db.tt/u7OxN09k"/>
                </a>
            </div>
        </div>
    </div>

谢谢

Answer 1

我在Internet Explorer 8的真实副本中看到了同样的问题（在IE8标准模式下）。

您可以使用CSS将蓝色图标添加为背景图像，而不是使用img标记。例如，CSS看起来像这样：

#divCalendarFooter a {
    padding-right: 36px;
    line-height: 32px;
    margin-right: 3px;
}

#lnkSelectColumns {
    background: url(http://db.tt/cEFFCjw0) no-repeat center right;
}

#printCalendar {
    background: url(http://db.tt/u94nalQx) no-repeat center right;
}

#aShowPrintByDateRange {
    background: url(http://db.tt/u7OxN09k) no-repeat center right;
}

这是一个小提琴：http://jsfiddle.net/C6etX/6/。如您所见，我必须在第二个链接中添加ID。

IE8浮动右侧将图像放在新行上

1 个答案: