0

我有一个带有导航栏的简单页面文件。它适用于除 Firefox 之外的所有浏览器。出于某种原因，导航栏被推向我的内容 div。这里可能是什么问题？我尝试过使用 margin-top ，但这只会破坏我在其他浏览器中的视图。

哦，我也在使用 Pure.CSS 菜单模块，以防万一。

这是我的代码。

.pure-menu.pure-menu-fixed {
  margin-top: -20px;
}
.pure-menu-selected .pure-menu-link,
.home-menu a {
  color: #342216;
  background-color: white;
}
body,
.home-menu,
.splash-container {
  background: white;
}
.pure-menu-list {
  top: 100px;
  right: 75px;
  font-family: 'Amatic SC', cursive;
  font: normal normal normal 22px/1.4em'amatic sc', cursive;
}
li.pure-menu-item:hover,
li.pure-menu-selected .pure-menu-link {
  color: white !important;
  background-color: #342216;
}
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<!--[if lte IE 8]>
      
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
      
    <![endif]-->
<!--[if gt IE 8]><!-->

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

<!--<![endif]-->



<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">



<!--[if lte IE 8]>
            <link rel="stylesheet" href="css/layouts/marketing-old-ie.css">
        <![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/layouts/marketing.css">
<!--<![endif]-->

<div class="header">
  <div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
    <a class="pure-menu-heading" href="#">
      <img src="img/logo.png" width="150" />
    </a>
    <ul class="pure-menu-list">
      <li class="pure-menu-item "><a href="#" class="pure-menu-link">Home</a> 
      </li>
      <li class="pure-menu-item pure-menu-selected"><a href="#view-1" class="pure-menu-link">View</a> 
      </li>
      <li class="pure-menu-item"><a href="#scenes" class="pure-menu-link">Gallery</a> 
      </li>
      <li class="pure-menu-item"><a href="#trailer" class="pure-menu-link">Trailer</a> 
      </li>
      <li class="pure-menu-item"><a href="#blank-mpvle" class="pure-menu-link">About</a> 
      </li>
      <li class="pure-menu-item"><a href="#crew" class="pure-menu-link">Crew</a> 
      </li>
      <li class="pure-menu-item"><a href="#blank-pvj6y" class="pure-menu-link">Contact</a> 
      </li>
    </ul>
  </div>
</div>
<div class="splash-container">
  <div class="splash">
    <p>This is my page content</p>
  </div>
</div>

4

0 回答 0