Question

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

JS

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，它分配位置，顶部和左侧属性，就像它应该的那样。对于另一个div，它只分配position属性，而不分配top和left。我不知道为什么这样做！谢谢你的帮助。

Answer 1

您的两个不同页面可能有不同的Doctypes。其中一个触发标准模式，另一个触发Quirks模式。

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

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

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

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

Answer 2

根据你的代码，你的HTML必须是，

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

你可以确保在这两个页面上，名为container的div具有类似“position:relative”的样式并再试一次吗？

并确保您在top / left属性上分配字符串而不是int。像

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

Answer 3

使用firebug或whatelse检查

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

这些值是数字。如果没有，它就无法运作

功能适用于一个div而不是另一个div

3 个答案: