IE8 向右浮动将图像放在新行上答案

【问题标题】：IE8 float right drops images on a new lineIE8 向右浮动将图像放在新行上
【发布时间】：2012-12-04 07:13:07
【问题描述】：

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

这是在 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>

谢谢

【问题讨论】：

是的，我今天早上刚刚将 IE10 降级为 IE9，因为 IE8 开发者模式不像 IE8 浏览器那样呈现浮动。谢谢微软:(
@Gerbus modern.ie - 感谢微软！

标签： html css internet-explorer web twitter-bootstrap

【解决方案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。

【讨论】：