[英]CSS code works in firefox and IE but not in chrome
我在這個網站上有一個菜單。 此菜單的CSS在Mozilla Firefox和IE上可以很好地工作，但在chrome中不起作用。 在chrome中，子菜單位於照片的下方，而在FF和IE中，其子菜單位於上方（應如此）。 同時，子菜單比FF和IE中的位置略高。 這是代碼：
@charset "utf-8"; /* CSS Document */ body { background-color: #000; background-image: url(Pictures/Plundergem-Title.png); background-repeat: no-repeat; background-position: 50% 0%; height: 1500px; } .menu-list { list-style-type: none; color: #E92A27; font-family: "Mayan Font"; font-size: 36px; } .menu-list li { cursor: pointer; } .menu-list li a:hover { background-color: #E92A27; color: #000; } .menu-list li ul li a:hover { background-color: #E92A27; color: #000; } .menu-list li ul li a { color: #E92A27; text-decoration: none; } .menu-list li a { text-decoration: none; color: #E92A27; } @font-face{ src:url(CFCivilisationMaya-Regular.woff); font-family:"Mayan Font"; } .menu-block { width: 200px; position: fixed; top: 200px; left: -23px; border-right: 3px solid #E92A27; } #menu-seperation { width: 150px; position: fixed; left: 20px; top: 270px; } #flash-container { position: relative; height: 500px; width: 700px; left: 300px; top: 700px; color: #FFF; font-family: "Text Font"; font-size: 18px; z-index: 1000; } #flash-container p { color: #FFF; font-family: "Text Font"; } @font-face{ font-family:"Text Font"; src:url(CataneoBT-Regular.woff); } .scenemenu { list-style-type:none; color:#E92A27; font-family:"Mayan Font"; position:fixed; top:297px; left:189px; z-index:2000; width:150px; display:none; } .scenemenu li { position:relative; left:-50px; z-index:2000; } #scenebutton:hover ul.scenemenu { display:inline; } .scenemenu:hover { display:inline; } #pic1 { z-index:1000; } a:visited { color:#E92A27; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> <script src="jquery-2.1.1.min.js"></script> <script src="jquery-scrollto.js"></script> <script src="animation.js"></script> <link rel="shortcut icon" href="Pictures/Gem Icon.png" /> <title>Plundergem Adventure Game</title> </head> <body> <div class="menu-block"> <ul class="menu-list"> <li><a href="index.php">HOME</a> </li> <hr id="menu-seperation" /> <br style="line-height: .3em" /> <li id="scenebutton">SCENES <ul class="scenemenu"> <li><a href="Enter the Temple 2nd Scene/index.php">SCENE 2</a> </li> <li><a href="Go Downstairs 3rd Scene/index.php">SCENE 3</a> </li> </ul> </li> </ul> </div> <div id="flash-container"> <img src="Pictures/Scene_1_converted.jpg" width="700" height="504" id="pic1" /> <p>The sky is dark, the grass is dark, and even the dark is quite dark. This will do a perfect job of setting the mood. Unfortunately, it is raining, meaning that you will be unable to pull off your uncanny Batman impressions. Will you climb the temple stairs, or will you head home?</p> <br /> <a href="Enter the Temple 2nd Scene/index.php"><u>1. Climb the temple stairs in an over manly fashion.</u></a> <br /> <br /> <a><u>2. Run away and never come back.</u></a> </div> </body> </html>
屏幕截圖-左側是Firefox，右側是chrome
我已經准備好了jsfiddle： http ： //jsfiddle.net/nd2jy6qg/
.menu-block {
width: 200px;
position: fixed;
top: 200px;
left: -23px;
border-right: 3px solid #E92A27;
z-index:10001;
}
問題是菜單塊中的z索引； 它必須至少為1001，因為閃存容器有1000；
CSS Sprite代碼可在Chrome和IE中使用，但不能在Firefox中使用？
[英]CSS Sprite code works in Chrome and IE but not in Firefox?
CSS shadow在IE / Edge中有效，而在Chrome或Firefox中不可用
[英]CSS shadow works in IE/Edge not in Chrome or Firefox
Watermark CSS可在Firefox中使用，但不能在Chrome或IE中使用
[英]Watermark css works in Firefox but not in Chrome or IE
CSS是否在Chrome中申請代碼，但在Firefox和IE中不申請代碼？
[英]CSS applying for code in Chrome, but not in Firefox and IE?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.