javascript - 位置在 Firefox 中工作良好，但在其他浏览器中不起作用

Question

我的标题中有一个下拉菜单，我希望当标题中的按钮单击时，下拉菜单会显示在该按钮下方。

该按钮位置是绝对的，我使用 jquery 位置来将该按钮置于左侧和底部。但这只是在 Firefox 中有效。为什么？

这是我的代码:

var search_div_top=($("#search-div").position().top);
var search_div_left=($("#search-div").position().left);

这是我的 CSS:

#search-div{
  width:200px;
  height:60px;
   /*center:*/
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
}

只有firefox返回该元素左右的实数，其他返回0。#search-div的父级是relative。

Answer 1

问题是什么？

Chrome 和其他浏览器(不是 Firefox)的问题是:

  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;

使用上面的 CSS，div 将显示在其父级的中心，如果您在上面的代码中看到我们有 left:0 和 right:0 并且 chrome 会看到这一点代码并获取其中之一，并从左或右开始，值为 0。

那么，解决方案是什么:

jquery中有一个获取元素位置的函数，只需使用以下代码:

var search_div_top=($("#search-div").offset().top);
var search_div_left=($("#search-div").offset().left);