IE 的 CSS 顶部和左侧有问题吗？答案

【问题标题】：Is There Something Wrong with IE's CSS Top And Left?IE 的 CSS 顶部和左侧有问题吗？
【发布时间】：2009-01-09 07:04:36
【问题描述】：

下面的 jQuery 代码对我来说在 Safari、Opera、FF2 和 FF3 上运行得很好。它在我的网页上的 FORM 元素顶部放置一个繁忙的 DIV（带有动画的繁忙 GIF）。问题是在 IE6 和 IE7 中，它正确地获得了宽度和高度，但似乎没有正确地获得顶部和左侧。有什么收获？

var nH = $('#' + sForm).attr('offsetHeight');
var nW = $('#' + sForm).attr('offsetWidth');
var nT = $('#' + sForm).attr('offsetTop');
var nL = $('#' + sForm).attr('offsetLeft');

$('#busy')
    .css('position','absolute')
    .css('height', nH + 'px')
    .css('width', nW + 'px')
    .css('top', nT + 'px')
    .css('left', nL + 'px')
    .show();

请注意，在我的页面上，我有多个 FORM 元素。（GIF 很忙的原因是因为我在提交表单时在后台做 AJAX 发布。）

注意，我还尝试了 jQuery Dimensions Plugin 1.2 的顶部和左侧的 .position() 值，这有所帮助，但似乎随着我在页面中向下移动，top 的值变得越来越偏离。

【问题讨论】：

标签： jquery css internet-explorer

【解决方案1】：

现在 jQuery（最新公开发布）包含维度作为核心功能。

尝试使用 $(element).offset() （它返回一个具有“left”和“top”属性的对象）。我已经使用了很多，并且非常适合许多浏览器（ie6/7、opera、safari、chrome、ff2/3）

【讨论】：

感谢您的提示。似乎我可以停止使用 jQuery 维度插件。我会试一试，看看偏移是否对我有用。可能是加快网页速度的另一件事，请 YSlow。

【解决方案2】：

我让它与 jQuery Dimensions Plugin 1.2 的 top 和 left 的 .position() 值一起使用。（它返回一个数组，您可以在其中获取顶部和左侧数组值。）解决方法是我必须为 IE6 设置陷阱，然后为顶部减去一些固定数字（在我的情况下为 12px），然后在高度上添加相同的数字。在 IE7 上，我可以做同样的事情，但由于某种原因，必须在前 200 像素或更少的像素上进行不同的顶部和高度数学运算。您的情况可能会有所不同，具体取决于您之前的 CSS、reset.css 等。

【讨论】：

【解决方案3】：

您确定元素设置为 display:block 吗？您还可以通过传递这样的哈希来避免多次调用 css 函数：

$('#busy')
    .css({'position':'absolute',
          'height': nH + 'px',
          'width', nW + 'px',
          'top', nT + 'px',
          'left', nL + 'px'})
    .show();

【讨论】：

感谢您的提示。我没有想到性能受到影响，我应该想到的。你是对的。