使用Float交换HTML元素不适用于旧的IE浏览器

Question

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

我要做的是在第二个元素上使用float:left交换2个元素，因此它会在第一个元素之前显示。这在现代浏览器上运行良好，但导致“swapped”元素移动到较旧的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屏幕截图

Answer 1

该问题结果证明IE6和IE7（IE8中不存在）如何处理左对齐元素中的float:right;。 IE6和IE7不是简单地将元素定位在最靠近左侧的点上，而是过去任何内容（如现代浏览器所做的那样），IE6和IE7可以将元素定位在尽可能最右边的位置（在定义方面没有那么大的差异，但在这样的情况下会产生很大的不同。）

无论如何，要超越此限制，float:right;无法用作解决方案。由于没有办法知道（没有JavaScript，OP声明不应该使用）.content span的宽度（可变页数），.wrapper上无法使用静态宽度。相反，“Next”和“Prev”链接元素必须“废弃”直到结束，然后绝对定位（相对于.wrapper）width { {1}}已被弄清楚了。

jsFiddle Example

魔法CSS

.wrapper

Answer 2

哪个版本的IE是'旧版IE'，具体来说？如果它是IE6，bfrohs是正确的，内联块可能会搞砸你。我弄乱了你的小提琴，想出了这个：

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中检查过，但它没有使用内联块，所以它有更好的机会运行。

Answer 3

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

IE6 / 7有这种显示类型的已知问题，因为如果元素的默认显示类型是block，它就不起作用（就像你的情况一样，因为你将它应用于一个<div>元素。）

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

显然你不希望它为其他浏览器采用inline样式，所以你需要使用CSS hack，条件注释或其他一些应用不同于IE6的风格的方式/ 7。

希望有所帮助。

Answer 4

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