css - 具有百分比和像素的计算函数。跨浏览器问题

Question

我有一个简单的社交媒体侧边栏，它固定在浏览器的左侧，始终位于屏幕的中间位置(因此滚动时它会跟随)。它在 Internet Explorer 中运行良好，但我在 Chrome 和 Firefox 中遇到问题。在 Chrome 中，该栏正确显示在屏幕下方 50% 处，但在滚动时它不会移动。在 Firefox 中，该栏位于左上角(错误位置)，并且在滚动时也不会移动。

我做了一些调查，发现 calc 函数可能因浏览器而异。我已经添加了我认为对所有浏览器都必需的 CSS，但仍然没有成功。

IE Visual (working)

Firefox Visual

Chrome Visual

.fbIcon {
  background-color: transparent;
  background-repeat: no-repeat;
  width: 64px;
  height: 64px;
  margin-right: auto;
  margin-left: auto;
  border: 0px;
  cursor: pointer;
  outline: 0;
  text-indent: -9999px;

  position: fixed;
  left: 0;
  /* Firefox */
  top: -moz-calc(50% - 128px);
  /* WebKit */
  top: -webkit-calc(50% - 128px);
  /* Opera */
  top: -o-calc(50% - 128px);
  /* Standard */
  top: calc(50% - 128px);

  background-image: url('icons/64/fbIcon.png'); }

 .linkedIcon {


background-color: transparent;
  background-repeat: no-repeat;
  width: 64px;
  height: 64px;
  margin-right: auto;
  margin-left: auto;
  border: 0px;
  cursor: pointer;
  outline: 0;
  text-indent: -9999px;
  /* Standard */
  top: calc(50% - 64px);
  position: fixed;
  left: 0;
  /* Firefox */
  top: -moz-calc(50% - 64px);
  /* WebKit */
  top: -webkit-calc(50% - 64px);
  /* Opera */
  top: -o-calc(50% - 64px);

  background-image: url('icons/64/linkedIcon.png'); }

等...

Answer 1

如果没有看到实际站点，我无法帮助您解决跨浏览器问题，但您可以在没有 calc() 的情况下解决此任务。将条形图放置在顶部 50% 的位置，并分配一个负边距，该边距是条形图高度的一半。此外，您不应单独放置每个图标，而应放置栏本身。

在你的情况下应该是这样的:

.icons_bar {
  width: 64px;
  height: 128px;

  position: fixed;
  left: 0;
  top: 50%;
  margin-top: -64px;
}

这是一个工作示例:http://codepen.io/matuzo/pen/MYbqZG