Body'width'属性影响屏幕计算

时间:2013-06-04 10:32:41

标签: javascript css

当BODY应用固定的CSS'宽度'时,我遇到了网页问题。在进行屏幕宽度计算/检查时(即内容的左边缘而不是浏览器窗口的左边缘),似乎给身体赋予宽度会影响浏览器认为是像素0的内容。

我有一个控件,它在特定的计算位置后加载到页面中。设置正文宽度且内容比浏览器窗口窄时,控件将显示在屏幕外。

在Chrome和IE10中,“margin-left”和“margin-right”属性正在动态设置,这意味着我仍然可以获得正确的结果。然而FF& Safari(我知道)不是。

在BODY具有明确固定宽度的情况下,是否有人能够以可靠的跨浏览器兼容方式准确获取可用宽度信息的任何建议或指示?非常感谢......

UPDATE :我在特定的地方看到了这一点,但看起来并不是导致问题的“宽度”属性,而是存在“position:relative”属性。请参阅下面评论中的jsfiddle链接。

为了澄清,我的控制是一个插件,可以进入任何人的网站,所以我需要尽量满足尽可能多的潜力。

1 个答案:

答案 0 :(得分:0)

设置为position: absolute的元素将根据其最近的position: relative祖先的content area进行定位,如果没有htmlposition: relative是默认值html 1}}祖先。

如果您希望您的控件始终显示在页面左上角右侧5px和300px,请将position: relative设置为position,并将正文保留为body设置完毕。

如果您希望控件贴在#myblock元素的右上角,请将property: value;设置为具有以下CSS position: absolute; top: 0; left: 100%; 对:

{{1}}

jsFiddle