1

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

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

jsFiddle 示例

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 屏幕截图

Internet Explorer 屏幕截图

4

4 回答 4

2

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

无论如何，要克服这个限制，float:right;不能用作解决方案。由于无法知道（没有 JavaScript，OP 声明不应该使用它）宽度.content span是多少（页数可变），因此无法在.wrapper. 取而代之的是，“Next”和“Prev”链接元素必须“丢弃”到最后，然后在计算出of.wrapper之后绝对（相对于 ）定位。width.wrapper

jsFiddle 示例

神奇的 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;
}
于 2012-05-30T03:49:22.453 回答
0

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

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

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

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

希望有帮助。

于 2012-05-29T21:25:42.957 回答
0

具体来说，哪个版本的 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，所以它更有可能工作。

于 2012-05-29T17:31:52.417 回答
-1

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

于 2012-05-29T17:07:36.780 回答