在Mozilla Firefox上显示webkit组件

我想在我的CSS中使用webkit函数开发一个网站。下面的代码在Google Chrome，Opera和Safari中运行良好，但不在Firefox中运行。我失去了Firefox中标签的红色背景和位置。在Mozilla Firefox上显示webkit组件

这是我的代码片段：

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>

谁能帮助我吗？

来源

2014-10-17 dev.mi

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

无处不在，它是今天支持box-shadow作品中的前缀的版本（例如，不IE8或Opera迷你），除了Android 2.3的设备。要覆盖这些设备，您可以使用-webkit-box-shadow。

的border-radius作品中的前缀的版本，今天随处它支持（再次，没有IE8或Opera迷你）全停，所以不要使用前缀。

的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]-->

来源

2014-10-17 12:50:02 jme11

非常感谢您的回答。 – 2014-10-17 14:16:56

在Mozilla Firefox上显示webkit组件

回答

相关问题