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

Calc函数包含百分比和像素。跨浏览器问题

1 个答案: