Html 某些浏览器的导航栏出现故障_Html_Css

Html 某些浏览器的导航栏出现故障

html css

Html 某些浏览器的导航栏出现故障,html,css,Html,Css,我一直在努力解决一个问题，这个问题实际上可能很容易解决，但由于我对CSS没有太多经验，我决定寻求帮助当我用最新版本的Safari、Chrome和Firefox测试它时，我网站上的导航栏工作正常，但有些版本似乎显示它有点问题。。即使是在智能手机上，问题也无处不在——导航栏右端的白线。我该怎么修？此外，在某些浏览器上，导航栏上的最后一个按钮位于下一行第一个按钮的下方以下是CSS文件： <style type="text/css"> #Container {} #container {

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

当我用最新版本的Safari、Chrome和Firefox测试它时，我网站上的导航栏工作正常，但有些版本似乎显示它有点问题。。即使是在智能手机上，问题也无处不在——导航栏右端的白线。我该怎么修？此外，在某些浏览器上，导航栏上的最后一个按钮位于下一行第一个按钮的下方

以下是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>

提前谢谢

测试此黑客添加html注释后：请参阅：

试试这个。浮动项目时，应为浮动的元素添加宽度。。我所做的是取6个li元素，除以你的850px的宽度。如果您想在将来添加更多的li，只需将li的数量除以容器的宽度即可

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

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

你看到的线是两个div重叠。如果你加上页边空白：100px；对于容器，您将看到它是分开的

不确定这是否能解决问题，但我注意到你没有清理你的浮动。没问题，希望你能得到解释。我尽量解释清楚。

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