2012-04-22 127 views
12

的,我不知道如何或者这是否可以使用Internet Explorer来完成6浮动下一个兄弟离开前一个兄弟

我想下一个同级浮到前一个兄弟的左

这就是我在做的事情,它与铬6,歌剧9和火狐1 +正确显示。

什么用IE6的问题是previous (2)浮动到最右边(其中当然最好是旁边next (1)是在页面的左侧。

.wrap{float:left;} 
.prev {float:right;} 
.next {float:left;} 


<div class="wrap"> 
<div class="prev">previous (2)</div><div class="next">next (1)</div> 
</div> 

如果可以做,你知道怎么做了,我会给250点

+3

http://www.ie6countdown.com/ – noob 2012-04-25 08:25:29

+0

有任何解决方案... – 2012-04-25 09:03:41

+0

没有ü尝试!保鲜膜类重要的... – 2012-04-25 12:03:24

回答

15

在这里你去:http://result.dabblet.com/gist/2489753

不能使用花车那里,“导致IE有令人讨厌的错误,如果它包含float: right;,它将拉伸到左侧的容器(或者是inline-block)。

但是,有一个很少使用的属性direction,可以用于这样的布局:它是完全跨浏览器,你可以使用它与inline-block s最好的效果。

因此,对于你的情况下,代码会是这样:

.wrap{ 
    display: inline-block; 
    direction: rtl; 
    } 
.prev, 
.next { 
    display: inline-block; 
    direction: ltr; 
    } 

display: inline-block没有为IE从包装盒的工作,所以你需要通过使内嵌但hasLayout的破解,所以添加这些到IE只在条件注释:

.wrap, 
.prev, 
.next { 
    display: inline; 
    zoom: 1; 
    } 

这就是它!

循序渐进:

  1. 使所有的内联块,所以它会在内嵌流程工作。
  2. 颠倒包装上的流量。
  3. 将流程返回到子项中的正常ltr模式。
  4. 它的完成:)
+0

我很想知道如何去做这件事。谢谢! – david 2012-04-25 14:19:55

+0

David:如果它是正确的答案,请点击'勾号'使其变为绿色,否则问题显示在“未答复”类别下 – Sotkra 2012-04-25 23:02:10

+0

这太棒了! (并且不要忘记为真正的RTL语言翻译所有内容!) – Doug 2012-04-27 19:14:42

1

我不记得,如果这一招在IE6工作的赏金。

.wrap{float:left;} 
.next {float:left;} 
.prev {overflow:hidden} 

我不要以为你将需要.wrap{float:left;}

<div class="wrap"> 
    <div class="next">next (1)</div> 
    <div class="prev">previous (2)</div> 
</div> 

这样.prev得到.left浮动后留下的宽度。

演示:

保鲜膜浮动:http://jsbin.com/exevis

没有包裹浮动:http://jsbin.com/opehig

+0

感谢安德烈亚斯工作! AL作为您的回复,但内容需要像我的例子'next(1)'必须位于文档标记中的previous(2)'之后。 – david 2012-04-22 15:31:26

0

考虑让那个方向财产意思是指像希伯来语言的文本方向,而不是铺设内容。虽然与IE6的怪物打交道时,木津的回答很聪明,我建议你把它包装在一个条件,并确保记录,即使你是页面上的唯一开发商的黑客。所有这一切都需要几个月的时间,也许几个马提尼酒可以启动,而这个实现看起来很荒谬。

+1

这应该作为对kizu答案的评论而输入,而不是单独的答案。 – Doug 2012-04-27 19:17:45

+0

非常真实,但我没有直接回答答案的选项。我猜这是某种获得的功能。通常,有人已将我的意见转移到适当的地方。 – 2012-04-28 12:53:00

+0

哦,我不知道添加评论必须获得。那么,希望你很快就能达到这个特权! – Doug 2012-04-30 18:30:34