1

I've come across an issue with web pages when the BODY has a fixed CSS 'width' applied. It seems that giving a width to the body affects what the browser considers to be pixel 0 when doing screen width calculations/checks (i.e. the left edge of the content rather than the left edge of the browser window).

I have a control which is injected into the page post-load at a specific, calculated position. When the body width is set and the content is narrower than the browser window, the control appears off-screen.

In Chrome and IE10, the "margin-left" and "margin-right" attributes are being dynamically set which means I could still get the right result. However FF & Safari (that I know of) aren't.

Does anyone have any advice or pointers as to how I can accurately get available width information in a reliable, cross-browser compatible way in the scenario of the BODY having an explicit, fixed width? Many thanks...

UPDATE: I'm seeing this in particular places, but it appears it's not the "width" attribute causing the issue, it's the presence of a "position: relative" attribute. See jsfiddle link in my comment below.

For clarification, my control is a plug-in which can go onto anyone's site so I need to try to cater for as many potentialities as possible.

4

1 回答 1

0

设置为的元素position: absolute将根据其最近祖先的内容区域进行定位，如果没有更近的祖先，则为默认值。position: relativehtmlposition: relative

如果您希望控件始终显示在页面左上角下方 5px 和右侧 300px 处，请设置html为position: relative并让 body 完全不position设置。

如果您希望控件粘在body元素的右上角，则设置#myblock为具有以下 CSSproperty: value;对：

position: absolute;
top: 0;
left: 100%;

jsFiddle

于 2013-06-04T15:05:16.320 回答