0

我正在为我的页面设计 CSS 布局，我只是遇到了问题。在第一页视图中，导航栏加载完全不正常，但在页面刷新后，一切看起来都很好，这是一个示例：

Before:

前

After:

在此处输入图像描述

我不确定为什么会这样做我对CSS有点陌生，任何信息都会非常感谢！

这是CSS：

html, body {
  margin: 0px;

}

.navbar-fixed {
  background: -webkit-linear-gradient(top, #fff 0, #eee 85%, #ddd 100%);
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-radius: 3px;
  box-shadow: 1px 1px 4px #e5e5e5;
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
}

.navbar-fixed ul {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.navbar-fixed ul li {
  display: inline-block;
}

.navbar-fixed .logo a {
  line-height: 50px;
  padding: 0;
  font-size: 32px;
  letter-spacing: -3px;
  transition:  0.3s;
  font-weight: bold;
  color: orange;
  text-decoration: none;
  text-shadow: 2px 2px 3px black;
  margin: 0 2em 0 1em;

}

.navbar-fixed .logo a:hover {
  text-shadow: 1px 1px 7px black;
  color: white;
  background: transparent;
}

.navbar-fixed ul.nav {
  float: right;
}

.navbar-fixed ul.nav li a {
  padding: 1em;
  display: block;
  color: #00AAEE;
  cursor: pointer;
  border: solid 0 1px 0 1px transparent;
  transition: 0.5s;
  text-decoration: none;
}

.navbar-fixed ul li a:hover, ul li.active a  {
  background-color: darkgrey;
  border-color: #ccc;
  color: white;
}

.container {
  margin: 0 auto;
  width: 70%;
}

.newswindow {
 padding: 1em;
 color: #fff;
 background-color: rgba(0, 0, 0, 0.75);
 position: absolute;
 bottom: 0;
 left: 0;
}

.newswindow h2 {
  font-size: 42px;
  border-bottom: 1px solid white;
  letter-spacing: -2px;
}

.newswindow p {
  font-size: 18px;
}
4

1 回答 1

1

某些浏览器特定的默认样式可能会干扰您定义的样式。（继承样式，默认为某些元素定义更具体的样式...）

对于所有浏览器中的同质行为，使用 CSS 重置并正确定义所有需要的样式，而不取决于浏览器的默认值。

这是一个很好的来源： http: //meyerweb.com/eric/tools/css/reset/

于 2013-05-03T19:55:36.107 回答