Question

我遇到了一个非常奇怪的问题。

我在CSS中有一个下拉菜单，我使用margin-top来显示和隐藏它。隐藏菜单时，margin-top设置为“-375”。此值正常工作，并将其放在除Safari之外的每个浏览器中的正确位置。如果我将值更改为更大的负数，例如“-575”，它在Safari中什么都不做。价值的积极变化确实改变了它在Safari中的地位。

我希望避免删除我的所有HTML，CSS和Javascript代码来解决这个问题，但我真正想知道的是（a）有没有人遇到过Safari，他们使用margin-top属性做了一些奇怪的事情价值观和（b）是否有任何理由我达到了设置属性的极限？

我很困惑。每个其他浏览器都只是花花公子。

另外：我注意到菜单的顶部位置与其他所有浏览器不同。

CSS

/* Main container that has overflow set to hidden so when the menu is at 
a negative value, all that's seen is the button at the bottom of it */
div.mobileMenu {
  display: inline-block;
  position: absolute;
  z-index: 200;
  height: 35px;
  width: 100%;
  top: 55px;
  overflow: hidden;
  text-align: center;
  transition: height 0.5s ease;
}

/* DIV that holds the actual menu */
#mobileMenuWrapper {
  display: inline-block;
  position: relative;
  height: 230px;
  width: 300px;
  /* Adjust the margin-top below to account for the height of the menu 
  that needs to be hidden when the menu isn't open */
  margin-top: -375px;
  text-align: center;
  transition: margin-top 0.5s ease;
}

/* Same as above except Javascript sets it to 'show' to set margin-top to
0 px, initiating the transition in the process */
#mobileMenuWrapper.show {
  display: inline-block;
  margin-top: 0px;
}

/* DIV that contains the actual menu */
div.mobileMenuOptionsWrapper {
  display: block;
  height: 100%
  width: 100%;
  text-align: center;
}

/* Button at the bottom of the menu that opens and closes it */
#mobileMenuButton {
  display: inline-block;
  height: 35px;
  width: 100px;
  margin: auto auto;
  text-align: center;
  line-height: 35px;
  background-color: black;
}

Answer 1

尝试使用显示块。这里没有理由使用内联块。众所周知，Safari有这个问题。

#mobileMenuWrapper {
  display: block;
}

不知道标记，很难说你是如何以及为什么使用内联块，但如果你试图将标签或某些东西水平排列，请使用float。

#mobileMenuWrapper {
  float: left;
}

Safari的最大利润率？

1 个答案: