用 Float 交换 HTML 元素，不适用于旧版 IE 浏览器答案

【问题标题】：Swapping HTML elements with Float, doesn't work on older IE browser用 Float 交换 HTML 元素，不适用于旧版 IE 浏览器
【发布时间】：2012-05-30 21:18:45
【问题描述】：

我有一些由第 3 方 API 构建的 HTML，因此我无法控制输出。 我唯一可以更改的是 CSS。如果可能，我宁愿不使用 JavaScript。

我要做的是在第二个元素上使用 float:left 交换 2 个元素，因此它显示在第一个元素之前。这在现代浏览器上运行良好，但会导致“已交换”元素在旧 IE 浏览器（特别是 6 和 7，以及兼容模式下的 IE）上移动到第二行。

jsFiddle Example

HTML（无法更改）

<div class="wrapper">
    <a class="page">Page: &nbsp;</a>
    <a class="previous">Prev</a>
    <span>
        <a>1</a>
        <a>2</a>
    </span>
    <a class="next">Next</a>
</div>

CSS

.wrapper{
    line-height:36px;
}
.wrapper span, .page{
    float:left;
}
.wrapper span a, .page{
    display:inline-block;
}
.wrapper span a{
    width:20px; 
}
.previous, .next{
    width:30px;
    display:inline-block;
}

现代浏览器截图

Internet Explorer 屏幕截图

【问题讨论】：

标签： html css internet-explorer-7 internet-explorer-6 css-float

【解决方案1】：

这个问题原来是 IE6 和 IE7（IE8 中不存在）如何处理左对齐元素中的 float:right; 的错误。 IE6 和 IE7 不是简单地将元素定位在最左边的点上，越过任何内容（就像现代浏览器所做的那样），而是将元素定位在最右边的点上（这在定义方面并没有太大区别，但在这种情况下会有很大的不同）。

无论如何，要克服这个限制，float:right; 不能用作解决方案。由于无法知道（没有 JavaScript，OP 声明不应该使用它）.content span 的宽度是多少（可变页数），所以不能在.wrapper 上使用静态宽度。相反，“Next”和“Prev”链接元素必须“丢弃”直到结束，然后在 .wrapper 的 width 之后绝对定位（相对于 .wrapper）想通了。

jsFiddle Example

神奇的 CSS

.wrapper {
    float:left; /* Can be 'display:inline;' instead, but this makes it possible to treat this as "block" */
    clear:left; /* Can be discarded if 'float:left;' isn't used */
    position:relative; /* Keeps 'next'/'prev' contained */
}
.page, span {
    float:left; /* Positions 'Page:' and page numbers on left */
}
.page, span a {
    padding-right:.5em; /* Can change this to whatever */
}
.previous {
    position:absolute;
    right:-6em; /* Width (including padding, borders, etc) of .previous and .next */
    width:2.5em;
    padding-right:.5em;
}
.next {
    position:absolute;
    right:-3em; /* Width (including padding, borders, etc) of .next */
    width:2.5em;
    padding-right:.5em;
}

【讨论】：

+1 太神奇了！非常棒的帮助，非常感谢！小细节：您可能想要编辑 CSS 以将 right:-6em 放入 .next 和 right:-3em 放入 .prev 或者 next 在 prev 之前

【解决方案2】：

具体来说，哪个版本的 IE 是“旧 IE 版本”？如果它是 IE6，那么 bfrohs 是正确的，即 inline-block 可能会搞砸你。我弄乱了你的小提琴，想出了这个：

http://jsfiddle.net/chippper/5rzVQ/15/

CSS：

.wrapper{
    line-height:36px;
}
.wrapper span, .page{
    float:left;
    display: inline;
}

.wrapper span a{
    width:20px; 
    float:left;
    display: block;
}
.previous, .next{
    width:30px;
}

这似乎达到了您所追求的效果。我没有在 IE 中签入，但它没有使用 inline-block，所以它有更好的工作机会。

【讨论】：

感谢您的回答，可惜还是和以前一样。旧版 IE 是指我必须兼容的 IE6 和 IE7（或兼容模式下的 IE 9）:-(
@Johann，还有哪些其他样式应用于这些元素？（来自其他样式表。）
@bfrohs 没有其他。我控制样式 100%
@Johann，在我的回答中尝试 jsFiddle 示例（最后）。

【解决方案3】：

你遇到的问题是display:inline-block;。

IE6/7 对此显示类型有一个已知问题，如果元素的默认显示类型为 block（即在您的情况下，因为您将其应用于 @ 987654323@元素）。

解决方法是改用display:inline;。这种解决方法利用了 IE6/7 也存在 inline 显示类型的错误这一事实，这意味着在某些情况下可以使用它来代替 inline-block。

显然，您不希望它为其他浏览器采用inline 样式，因此您需要使用 CSS hack、条件 cmets 或其他方式来应用特定于 IE6/7 的不同样式。

希望对您有所帮助。

【讨论】：

【解决方案4】：

使用标签名称作为 CSS 选择器在旧版本的 IE 中将无法正常工作。使用 id 或 class 名称作为 css 选择器，应该适合您。

【讨论】：