Question

当我在Chrome中运行我的（非常基本的）页面时，它会以正确的大小，颜色和位置显示标题和列表。背景图像也适合屏幕。但是当我在FF或IE中运行我的页面时，没有背景图像，标题和列表没有我的CSS位置，颜色或大小。

我已经复制了下面的代码。我的问题是：如何在我的网页上显示所有/大多数浏览器中的标题和列表，其大小，颜色和位置与我在CSS中设置的正确大小，颜色和位置相同？也用于显示背景图像。我希望这不是太笼统。请帮忙！

这是我的HTML：

<!DOCTYPE html> 
<html>
  <head>
    <link rel="stylesheet" type="txt/css" href="C:///****/*****/Desktop/FifaStream1.0/indexstyle.css"/>
    <title> Fifa Stream </title>
  </head>
  <body>
    <h1 id="Title1"> <font color="grey"> Fifa  </font color> <font color="red">Stream </font color></h1>
    <nav class="IndexList">
      <li> <a href="HomePage.html"> Home <br> <br> </a> </li>
      <li> <a href="YoutubePage.html"> Youtube <br> <br> </a> </li>
      <li> <a href="AboutUs.html"> About Us <br> <br> </a> </li>
    <nav>
  </body>
</html>

这是我的CSS：

body {
  font-family: "proxima-nova",sans-serif;
  background:url(fifa13messi.png);
  -moz-background:url(fifa13messi.png);
  background-size:100%;
  -moz-background-size:100%; /* Old Firefox */
  background-repeat:no-repeat;
}

#Title1 {
  position:relative;
  left:5%;
  top:5%;
  font-size: 3em;
}

.IndexList {
  list-style: none;
  position:relative;
  left:5%;
  top:40%;
  font-size:2em;
  font-weight: 600;
  letter-spacing: -1px;
}

a {
  color:white;
  text-decoration: none;
}

如果有人能解释我出错的地方或原因，那将是一个很大的帮助。

Answer 1

type属性应为text/css，而不是txt/css。 IE和Firefox（正确地）因不匹配而拒绝它。

Answer 2

由于<li>元素不能是<nav>元素的子元素，因此它们只能是<ul>或<ol>元素的子元素...

Answer 3

我想说的第一件事是尝试做一些聪明的工作，使用一些html eiditor，比如dreamweaver或其他一些提供提示的人。

现在这里逐点列出你编码中的问题

链接css的类型属性应为text / css。不。 TXT / CSS
尝试在创建标签后关闭标签。这将始终使shure所有标签都关闭。 Bcz你的导航标签没有关闭，但创建了两个导航标签而没有关闭它们。
Li标签应包含'o'或'ul'

感谢。

Answer 4

您的<nav>代码需要</nav>结束标记，而不是第二个<nav>。

为什么我的外部CSS在FF或IE中不起作用，但在Chrome中却起作用？

4 个答案: