固定位置不适用于Chrome

Question

右列固定位置适用于Opera和Firefox但不适用于Chrome,任何解决方案？

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

Answer 1

1)首先,删除display: inline因为,如果你想要块级元素position: fixed,你也不能拥有它inline.甲fixed位置元件是正常的流的外侧,因此,根据定义,不能同时是内联.

2)其次,删除,float: right因为你想要它fixed. 根据规范,它不可能两者兼而有之.

"......如果'position'的值为'absolute'或'fixed',则该框绝对定位,'float'的计算值为'none'..."〜W3C spec

3)最后,当使用absolute或fixed(fixed是absolute 根据规范的子集)时,通过添加类似的东西来设置元素的位置,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规范.

Answer 2

根据规范固定意味着元素相对于浏览器窗口定位.但你没有指定任何(顶部,右侧,左侧,底部),所以它知道在窗口中的位置.尝试指定实际位置.