【问题标题】:CSS only works in Chrome [closed]CSS 仅适用于 Chrome [关闭]
【发布时间】:2013-10-27 23:34:02
【问题描述】:

我今晚需要提交这个网站,但它只能在 Chrome 中使用。我已经尝试了我能想到的一切(我对此很陌生,几周前才了解 HTML 和 CSS)。 HTML 似乎工作正常,但我的样式表似乎不起作用。

CSS:

@charset "utf-8"; /* CSS Document */
body {
    background-image: url('http://oi43.tinypic.com/2yvmjvq.jpg');
    color: #FFF;
}

::selection {
    background: #FB5549;
}

::-moz-selection {
    background: #FB5549;
}

a.class2 {
    text-decoration: none;
    color: #1F1B21;
}

a.class2:visited {
    color: #1F1B21;
}

a.class2:hover {
    color: #1F1B21;
}

a.class2:active {
    color: #1F1B21;
}

a.class1 {
    text-decoration: none;
    color: black;
}

a.class1:visited {
    color: #0A0A0A;
}

a.class1:hover {
    color: #FB5549;
    font-style: italic;
}

a.class1:active {
    color: #FB5549;
}

a.class3 {
    text-decoration: none;
    color: #FFF;
}

a.class3:visited {
    color: #FFF;
}

a.class3:hover {
    color: #FB5549;
    font-style: bold;
}

a.class3:active {
    color: #FB5549;
}

a.class4 {
    text-decoration: none;
    color: #0A0A0A;
}

a.class4:visited {
    color: #0A0A0A;
}

a.class4:hover {
    color: #0A0A0A;
}

a.class4:active {
    color: #0A0A0A;
}

#wrapper {
    clear: both;
    width: 690px;
    margin-top: 85px;
    margin-left: auto;
    margin-right: auto;
    background-color: #0A0A0A;
    padding-top: 14px;
    padding-bottom: 2px;
}

header {
    text-align: center;
    width: auto;
    margin-top: -8.0em;
}

h1 {
    font-family: "lobster 1.4";
    color: #1F1B21;
    font-size: 50px;
}

h2 {
    font-family: "aleo";
    font-size: 22px;
    line-height: 20px;
    letter-spacing: 0.8px;
}

h6 {
    font-family: "lekton";
    color: white;
    font-weight: 500;
    text-align: center;
}

nav {
    position: fixed;
    left: 208px;
    top: 145.5px;
    width: 8em;
    margin-top: -2.5em;
    font-family: "consolas";
    font-size: 14px;
    line-height: 18px;
    color: #0A0A0A;
    text-align: right;
}

aside {
    position: fixed;
    left: 1046px;
    top: 145.5px;
    width: 177px;
    margin-top: -2.5em;
    font-family: "consolas";
    font-size: 14px;
    line-height: 18px;
    color: #0A0A0A;
    text-align: justify;
}

#content {
    width: 650px;
    text-align: justify;
    font-family: "lekton";
    font-size: 14px;
    line-height: 18px;
    padding-right: 20px;
    padding-bottom: 15px;
    padding-left: 20px;
    border-bottom: 1px dotted #C6C6C6;
}

footer {
    clear: both;
    width: 690px;
    line-height: 14px;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <meta charset="utf-8">
      <br>
      <title>Start</title>
      <link href="style/stylesheet.css" rel="stylesheet" type="text/css>
         <style type="text/css">
      </style>
   </head>
   <body>
      <nav>
         <h2><a href="index.html" class="class4" title="Tilbage til startsiden">menu</a></h2>
         <a href="start.html" class="class1">start</a><br>
         <a href="om mig.html" class="class1">om mig</a><br>
         <a href="skolearbejde.html" class="class1">skolearbejde</a><br>
         <a href="http://www.rtgkom.dk/wiki/Main_Page" class="class1" target="blank">rtgkom</a><br>
      </nav>
      <div id="wrapper">
         <header>
            <h1><a href="start.html" class="class2">laura Andersen</a></h1>
         </header>
         <div id="content">
            <article>
               <hgroup>
                  <h2>om siden</h2>
               </hgroup>
               <p>
                  Dette er mit studieweb på <a href="http://www.rtgkom.dk/wiki/Main_Page" class="class3" target="blank">rtgkom</a>, hvor jeg lægger alle de relevante projekter ud, som jeg arbejder på i sammenhæng med mit gymnasieforløb. Siden er lavet i faget kommunikation/it, hvor vi har arbejdet med HTML og CSS.
               </p>
            </article>
         </div>
         <footer>
            <center>
               <h6>Lavet af <a href="index.html" class="class3">Laura Andersen</a><br>
                  Sidst opdateret den 22. oktober 2013
               </h6>
            </center>
         </footer>
      </div>
      <aside>
         <h2>hvad laver jeg?</h2>
         <p>Jeg er i gang med at lave mit studieweb. Vi er startet på emnet "grafisk design".</p>
      </aside>
   </body>
</html>

【问题讨论】:

  • 请描述问题。 究竟是什么不起作用,应该如何起作用?
  • Stack Overflow 不是一些个人黄金支持论坛。
  • 我不完全确定,但是当我在 Chrome 以外的其他浏览器中查看该网站时,看起来我根本没有样式表。就像它只是在网站上显示的 HTML,而 CSS 没有任何效果。
  • 暗影法师:我知道,但我试过问我的一些同学,他们也不知道是什么问题。你看,他们中的几个有同样的问题。我们只是想解决一个问题,除了在线询问之外,我没有看到其他解决方案。
  • 我已从问题中删除了“紧急”。清晰且结构良好的问题更有可能得到快速回答。如果您想要一个快速的答案,您可以自己创建一个明确的问题。例如,您可以通过关注the checklist 来做到这一点。

标签: html css google-chrome


【解决方案1】:

链接标签中缺少'"':

<link href="style/stylesheet.css" rel="stylesheet" type="text/css>

改成&lt;link href="style/stylesheet.css" rel="stylesheet" type="text/css"&gt;

【讨论】:

  • 谢谢。我们的老师给了 os 一个我们可以使用的“模板”,显然他忘记了一个“。我们现在都在纠正它。谢谢,你是救生员。
  • @user2925281 哇,看来你的老师可能需要自己上几节课:(
【解决方案2】:

尝试通过验证器(例如 validator.w3.org)运行所有 HTML 以检查错误。

【讨论】:

    猜你喜欢
    • 2011-01-12
    • 1970-01-01
    • 2019-03-29
    • 2013-06-02
    • 2011-07-20
    • 2013-01-28
    • 1970-01-01
    • 1970-01-01
    • 2016-07-21
    相关资源
    最近更新 更多