1

我有 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 中运行 jsfiddle 会显示问题，但是，在 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>​

谢谢

4

1 回答 1

2

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

img您可以使用 CSS 将蓝色图标添加为背景图像，而不是使用标签。例如，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。

于 2012-12-03T23:13:07.300 回答