Question

我有这个网站，我有一个菜单。这个菜单的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 enter image description here

Answer 1

我准备了一个jsfiddle：http://jsfiddle.net/nd2jy6qg/

.menu-block {
  width: 200px;
  position: fixed;
  top: 200px;
  left: -23px;
  border-right: 3px solid #E92A27;
   z-index:10001;
}

问题是菜单块中的z-index;它必须至少为1001，因为闪存容器有1000;

CSS代码适用于Firefox和IE，但不适用于chrome

1 个答案: