2012-04-22 143 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