在相對格內顯示固定div，偏移百分比[SAFARI bug]

我在使用Bootstrap和Safari時遇到問題。在相對格內顯示固定div，偏移百分比[SAFARI bug]

我想放置一個相對於它的父母的固定div，它適用於除Safari之外的所有瀏覽器。

同樣的問題在這裏解釋： https://github.com/lionheart/openradar-mirror/issues/147

現在我試圖找到一個很好的解決方法：

原始代碼（未在Safari工作）

<div class="row"> 
    <div class="col-md-8 col-md-push-4"> 
     <div class="fixed-div">SOME FIXED CONTENT</div> 
     CONTENT A 
    </div> 
    <div class="col-md-4 col-md-pull-8"> 
     CONTENT B 
    </div> 
</div>

CSS：

.fixed-div{ 
    position:fixed; 
}

這不起作用ex在Safari瀏覽器。「固定股利」並不像它的父母那樣「推動」。它應顯示在「內容A」上方。

我找到了一個解決辦法，但我認爲這不是一個乾淨的：

<div class="row"> 
    <div class="col-md-4"> 
    </div> 
    <div class="col-md-8"> 
     <div class="fixed-div">SOME FIXED CONTENT</div> 
    </div> 
    <div class="clearfix"></div> 

    <div class="col-md-8 col-md-push-4"> 
     CONTENT A 
    </div> 
    <div class="col-md-4 col-md-pull-8"> 
     CONTENT B 
    </div> 
</div>

你們有更好的想法如何解決這一問題？

來源

2016-03-31 warch

固定div相對於視口是固定的，我認爲你想絕對不固定。 –

不是我真的想要它固定（也滾動時），但開始在父div的相同位置。它適用於除Safari之外的所有瀏覽器。當你沒有「col-XX-push-YY」（Safari會忽略左側的百分比偏移量）時，Safari的行爲「如預期」 – warch

嘗試切換到從fixed到absolute的CSS屬性。如果這不能解決您的問題，您可以在您的HTML之前添加自定義檢查，以查看用戶來自哪個瀏覽器並加載該特定CSS頁面How to use different CSS for Different Browsers。

來源

2016-03-31 14:16:03 jdave

感謝您的迴應。但絕對位置不符合我的需要，因爲我希望它在滾動時也能修復。使用不同的css也不起作用，因爲我沒有找到任何將在safari上工作以獲得預期結果的css。 – warch

我剛剛在Safari中運行了您提供給Github問題的jsfiddle的鏈接。您是否嘗試調整'.fixed-div'的z-index？ – jdave

在相對格內顯示固定div，偏移百分比[SAFARI bug]

回答

相關問題