Question

我正在尝试使用CSS中的webkit函数开发一个网站。以下代码适用于Google Chrome，Opera和Safari，但不适用于Firefox。我在Firefox中丢失了标签的红色背景和位置。

这是我的代码段：

window.onscroll = fadeNav;

function fadeNav() {
  var offset = getScrollXY();
  //if y offset is greater than 0, set opacity to desired value, otherwise set to 1
  offset[1] > 0 ? setNavOpacity(0.4) : setNavOpacity(1.0);
}

function setNavOpacity(newOpacity) {
  var navBar = document.getElementById("header_bar");
  navBar.style.opacity = newOpacity;
}

function getScrollXY() {
  var scrOfX = 0,
    scrOfY = 0;

  if (typeof(window.pageYOffset) == 'number') {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }

  return [scrOfX, scrOfY];
}

* {
  margin: 0px;
  padding: 0px;
}
#header_bar {
  height: 40px;
  position: fixed;
  top: 0px;
  z-index: 10020;
  width: 100%;
  background: -webkit-linear-gradient(270deg, #b20000, #7f0000);
  -webkit-border-radius: 2px;
  /*making rounded corners*/
  -webkit-box-shadow: rgba(110, 110, 110, 0.6) 0px 4px 4px;
  /*color, left, down, blur, transparency : include inset if you want it to be an internal shadow*/
  display: -webkit-box;
  -webkit-box-orient: horizontal;
}
#title {
  font: bold 20px Tahoma;
  color: white;
  margin: 10px;
  text-align: left;
  width: 80%;
}
#uname {
  font: 12px Tahoma;
  color: white;
  margin: 10px;
  text-align: right;
}
#accnt {
  font: 12px Tahoma;
  color: white;
  margin: 10px;
  text-align: right;
}
#help {
  font: 12px Tahoma;
  color: white;
  margin: 10px;
  text-align: right;
}
#storg {
  font: 12px Tahoma;
  color: white;
  margin: 10px;
  text-align: right;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>..:CodeByMi Home:..</title>
  <link rel="stylesheet" href="navbar-fader.css">
  <script src="navbar-fader.js"></script>
</head>

<body>
  <div id="header_bar">
    <div id="title">codedByMi</div>
    <div id="uname">username</div>
    <div id="accnt">account</div>
    <div id="help">help</div>
    <div id="storg">storage</div>
  </div>
</body>

</html>

有人可以帮我吗？

Answer 1

在大多数情况下，您不再需要为渐变，边框半径和框阴影添加前缀。 flexbox的东西有点复杂，但我会在下面讨论。

box-shadow 的无前缀版本今天在任何地方都可以使用（例如，不是IE8或Opera-Mini），除了Android 2.3设备。要覆盖这些设备，您可以使用-webkit-box-shadow。

border-radius 的无前缀版本今天无处不在，支持（再次，没有IE8或Opera-Mini）完全停止，所以不要使用前缀。

linear gradient 的无前缀版本在现代浏览器中具有良好的覆盖率，但4.4之前的旧版Safari和Android版本将受益于-webkit-前缀。

Flexbox有点棘手。在过去的几年中，对它的支持已经改变了好几次。有关此内容的详细信息，请参阅此文： "Old" Flexbox and "New" Flexbox 。这是最全面的概述，记录了我能找到的多年来的变化。 CanIUse.com可以很好地表示哪些浏览器支持哪种语法。您可以找到 flexbox overview here 。

<强> CSS：

#header_bar {
  height: 40px;
  position: fixed;
  top: 0px;
  z-index: 10020;
  width: 100%;
  background: -webkit-linear-gradient(270deg, #b20000, #7f0000);
  background: linear-gradient(270deg, #b20000, #7f0000); /*Always put the unprefixed version last*/
  border-radius: 2px; /*No prefix required here*/
  -webkit-box-shadow: rgba(110, 110, 110, 0.6) 0px 4px 4px; 
  box-shadow: rgba(110, 110, 110, 0.6) 0px 4px 4px; /*Always put the unprefixed version last*/
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; /*Accepts wrap | nowrap | wrap-reverse */
  -webkit-flex-direction: row;
  flex-direction: row; /*row is used instead box-orient that was only supported in FireFox*/
}

可以在Smashing Magazine找到有关flexbox旧语法和新语法的另一个很好的摘要。请记住，IE8和IE9根本不支持灵活的盒子模型。因此，如果您需要支持这些浏览器，您应该考虑另一种方法，例如使用条件语句为这些浏览器加载单独的css文件。例如：

<!--[if lte IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8-and-ie9.css" />
<![endif]-->

在Mozilla Firefox上显示webkit组件

1 个答案: