Question

我一直在努力解决一个问题，这可能很容易解决，但由于我对CSS没有多少经验，所以我决定寻求帮助。

当我使用最新版本的Safari，Chrome和Firefox进行测试时，我网站上的导航栏工作得很好，但是有些版本似乎显示它有点故障..即使在智能手机上，问题也随处可见 - 白色导航栏右端的行。我该如何解决？此外，在某些浏览器上，导航栏上的最后一个按钮位于第一个按钮下方（在下一行）。

Screenshot of the problem here.

这是CSS文件：

<style type="text/css"> #Container {} #container {
  font-family: Arial;
  width: 804px;
  background: #fafafa;
  border-radius: 1px;
  border: 3px solid #000;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 6px;
}
body {
  background-image: url("img/bg-light.png")
}
.header {
  height: auto;
  width: 850px;
}
#nav li {
  float: left;
}
#nav {
  font-family: Arial;
  width: 850px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background-color: #fafafa;
}
#nav li a {
  display: block;
  padding: 10px 38.4px;
  text-decoration: none;
  background-color: #000;
  color: #FFF;
}
#nav li a:hover {
  color: #000;
  background-color: #fadd75;
}
.tabel {
  margin: 0px;
  padding: 0px;
  width: 100%;
  border: 1px solid #000000;
}
.tabel table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}
.tabel tr:last-child td:last-child {
  border-bottom-right-radius: 0px;
}
.tabel table tr:first-child td:first-child {
  border-top-left-radius: 0px;
}
.tabel table tr:first-child td:last-child {
  border-top-right-radius: 0px;
}
.tabel tr:last-child td:first-child {
  border-bottom-left-radius: 0px;
}
.tabel tr:nth-child(odd) {
  background-color: #fadd75;
}
.tabel tr:nth-child(even) {
  background-color: #fafafa;
}
.tabel td {
  vertical-align: middle;
  border: 1px solid #000000;
  border-width: 0px 1px 1px 0px;
  text-align: left;
  padding: 7px;
  font-size: 12px;
  font-family: Arial;
  font-weight: normal;
  color: #000000;
}
.tabel tr:last-child td {
  border-width: 0px 1px 0px 0px;
}
.tabel tr td:last-child {
  border-width: 0px 0px 1px 0px;
}
.tabel tr:last-child td:last-child {
  border-width: 0px 0px 0px 0px;
}
.tabel tr:first-child td {
  background: -o-linear-gradient(bottom, #000000 5%, #000000 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000");
  background: -o-linear- gradient(top, #000000, 000000);
  background-color: #000000;
  border: 0px solid #000000;
  text-align: center;
  border-width: 0px 0px 1px 1px;
  font-size: 14px;
  font-family: Arial;
  font-weight: bold;
  color: #ffffff;
}
.tabel tr:first-child td:first-child {
  border-width: 0px 0px 1px 0px;
}
.tabel tr:first-child td:last-child {
  border-width: 0px 0px 1px 1px;
}

如果需要HTML - 这里是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<html>

<head>
  <title>Carcassonne</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div id="header">
    <center>
      <img id="header" src="img/header.png" alt="Carcassonne Logo" class="header">
    </center>
    <ul class id="nav">
      <li><a href="index.html" class="button">
        Mängust</a>
      </li>
      <li><a href="reeglid.html" class="button">
        Reeglid</a>
      </li>
      <li><a href="laiendused.html" class="button">
        Laiendused</a>
      </li>
      <li><a href="autorist.html" class="button">
        Autorist</a>
      </li>
      <li><a href="voistlused.html" class="button">
        Võistlused</a>
      </li>
      <li><a href="osta.html" class="button">
        Ostmine</a>
      </li>
    </ul>
  </div>
  <div id="container">

    Content
</body>
</div>

</html>

提前致谢！

Answer 1

在</li>之后测试此hack添加html评论：请参阅：http://jsfiddle.net/7a1x4e4s/

<li><a href="osta.html" class="button">
        Ostmine</a>
      </li><!-- !>

Answer 2

试一试。浮动项目时，您应该为要浮动的元素添加宽度。http://jsfiddle.net/02j2Lzfd/。所以我所做的是采用6 li元素并将其除以850px的宽度。如果您想在将来添加更多li，只需将li的数量除以您的容器宽度。

#nav li {
  float: left;
  display: inline-block;
  width: 141.666px;
}

Answer 3

第一个div; div id，img id和class all = header。 ID只能在页面中使用一次，不能称为类。如果您决定将其保留为id，那么在CSS中它应该是#header

你看到的线是两个重叠的div。如果您将margin-top:100px;添加到#container，您会看到它是分开的。

导航栏有些浏览器有问题

3 个答案: