我正在尝试在我的 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>谁能帮帮我？
最佳答案
在大多数情况下，您不再需要添加诸如渐变、边框半径和框阴影之类的前缀。 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*/
}
关于 flexbox 新旧语法的另一个很好的总结可以在 Smashing Magazine 找到。 .请记住 IE8 和 IE9 根本不支持灵活的盒子模型。因此，如果您需要支持这些浏览器，您应该考虑另一种方法，例如使用条件语句为这些浏览器加载单独的 css 文件。例如:
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-ie9.css" />
<![endif]-->
关于html - 在 Mozilla Firefox 上显示 webkit 组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26423900/