固定位置不適用於Chrome

右列固定位置適用於Opera & Firefox，但不適用於Chrome，任何解決方案？固定位置不適用於Chrome

#rightcolumn { 
margin: 0px 0px 0px 0px; 
float: right; 
font-family: Arial; 
font-weight: bold; 
height: auto; 
width: 300px; 
display: inline; 
position: fixed; 
}

來源

2012-01-19 Saiful Islam

你能提供一個測試用例嗎？你的CSS應該可以正常工作。 –

描述你的問題。顯示所有相關的代碼。 – Marcin

你是如何應用這個選擇器的，你的意思是「不工作」 - 你可以創建一個jsFiddle來展示你的意思嗎？ –

根據spec固定方式該元素相對於瀏覽器窗口定位。但你沒有指定任何（頂部，右側，左側，底部），所以它知道在窗口中的位置。嘗試指定實際位置。

來源

2012-01-19 16:13:32 ehudokai

你不能浮動和修復一個元素上的位置，並期望它的工作。另外，由於在CSS中沒有top，left，right或bottom，所以您還沒有聲明要將該元素固定在哪裏。

刪除浮動，添加定位（top，left，right或bottom），它應該工作得很好。

<div id="rightcolumn"> 
<p>blah blah blah</p> 
</div> 

#rightcolumn { 
margin: 0px; 
top:0; 
right:0; /*places div in top right corner and stays there even when you scroll!*/ 
font-family: Arial; 
font-weight: bold; 
height: auto; 
width: 300px; 
position: fixed; 
}

您現在在瀏覽器的右上角有一個300px寬度的框位置。除非你使用IE6或7，否則不會在那裏工作。

來源

2012-01-19 16:25:05 tahdhaze09

1）首先，刪除display: inline，因爲如果你想塊級元素爲position: fixed，你不能也有它inline。 A fixed position element is outside the normal flow，因此，根據定義，不能也是內聯的。

2）其次，刪除float: right因爲你想要它fixed。 According to the spec，它不能同時存在。

"...if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none'..." ~ W3C spec

3）最後，使用absolute或fixed（fixed時是absoluteaccording to the spec），設置元件的位置通過添加類似top: 0;和right: 0;其相對於放置它的邊緣的子集的父母。

#rightcolumn { 
    margin: 0; 
    font-family: Arial; 
    font-weight: bold; 
    height: auto; 
    width: 300px; 
    position: fixed; 
    top: 0; <-- adjust accordingly 
    right: 0; <-- adjust accordingly 
}

這是Visual Formatting Model spec。

來源

2012-01-19 16:38:55 Sparky

固定位置不適用於Chrome

回答

相關問題