在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組件

回答

相關問題