适用于一个 div 但不适用于另一个 div 的函数答案

【问题标题】：Function working for one div but not another适用于一个 div 但不适用于另一个 div 的函数
【发布时间】：2012-03-22 03:53:05
【问题描述】：

我在两个不同的网页上有两个不同的 div 元素，它们使用两个不同的 JS 文件。两个 JS 文件具有相同的 alignDiv() 函数，用于将 div 对齐在页面的确切中心。我在窗口加载时调用以下函数：

function alignDiv(){
  var container= document.getElementById("container");
  var inner= document.getElementById("inner");
  var inHeight=inner.offsetHeight;
  var conHeight=container.offsetHeight;
  var conWidth=container.offsetWidth;
  var inWidth=inner.offsetWidth;

  inner.style.position="absolute";
  inner.style.top=((conHeight-inHeight)/2);
  inner.style.left=((conWidth-inWidth)/2);

}

对于一个 div，它会按照应有的方式分配 position、top 和 left 属性。对于其他 div，它只分配 position 属性，不分配 top 和 left。我不知道它为什么这样做！感谢您的帮助。

【问题讨论】：

标签： javascript css html alignment

【解决方案1】：

使用firebug或whatelse检查

 var inHeight=inner.offsetHeight;
  var conHeight=container.offsetHeight;
  var conWidth=container.offsetWidth;
  var inWidth=inner.offsetWidth;

这些值是数字。如果没有，它不会工作

【讨论】：

【解决方案2】：

根据您的代码，你的 html 必须是，

<div id="container" style="position:relative">
    <div id = "inner">
        some content
    </div>
</div>

您能否确保在两个页面上，名为 container 的 div 具有类似“position:relative”的样式，然后重试？

并确保您在 top/left 属性上分配 string 而不是 int 。喜欢

inner.style.top=((conHeight-inHeight)/2)+"px";

【讨论】：

【解决方案3】：

您的两个不同页面可能具有不同的 Doctype。其中一个触发标准模式，另一个触发怪癖模式。

top 和 left 属性采用长度。除非它们是 0，否则长度必须有单位。您正在为它们分配编号。

在标准模式下，浏览器会正确地忽略该规则。在 quirks 模式下，他们尝试通过假设 px 来执行错误恢复。

inner.style.top=((conHeight-inHeight)/2) + "px";
inner.style.left=((conWidth-inWidth)/2) + "px";

... 并修复 Quirks 模式页面，使其使用标准模式。 Quirks 模式下的浏览器之间存在许多不一致的情况，这给它带来了很多麻烦。

【讨论】：