Question

在Chrome中，我的网站正在按照我的意愿运作。但出于某种原因，在Firefox中，CSS没有任何关联，我不能为我的生活找出原因。

当我进入检查器时，Firefox中唯一不同的是，浏览器在CSS链接的末尾添加了</link>，但我无法摆脱它因为我没有实际编码。

有没有人知道可能导致此问题的原因是什么？

网站是：http://www.renegademagsu.com

这是我的标题部分HTML：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Renegade Magazine</title>
        <link rel="stylesheet" type="type/css" href="<?php bloginfo('template_directory'); ?>/reset.css" />
        <link rel="stylesheet" type="type/css" href="<?php bloginfo('template_directory'); ?>/style.css" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    </head>

CSS

 /*
Theme Name: Renegade
Theme URI: N/A
Author: Noelle Devoe
Author URI: http://www.noellesnotes.com
Version: 1.0
*/


 body {
     background-color: #000;
     font-family:'Source Sans Pro', Arial;
     font-size: 18px;
 }

b, strong {
  font-weight: bold;
}

 .container {
     width: 960px;
     margin: 0 auto;
 }

 header {
     width: 100%;
     height: 135px;
 }

 .logo {
     width: 260px;
     height: 135px;
     float: left;
 }

 nav {
     width: 685px;
     height: 135px;
     padding-left:15px;
     float: left;
 }

 nav ul li {
     float: left;
     line-height: 135px;
     position: relative;
 }

 nav ul li a {
     font-size: 24px;
     color: white;
     background-color: black;
     font-weight: bold;
     margin-right: 20px;
     text-decoration: none;
     text-transform: uppercase;
     display: block;
 }

 nav ul li a:hover {
     text-decoration: underline;
 }

 nav ul ul {
     width: 200px;
     height: 50px;
     position: absolute;
     top: 85px;
     left: 0;
     display: none;
     z-index: 1000;
 }

 nav ul ul li {
     float: none;
     line-height: 50px;
 }

 nav ul ul li a {
     font-weight: regular;
     font-size: 20px;
 }

 nav ul li:hover ul {
     display: block;
 }

 .search {
     width: 260px;
     height: 135px;
     float: left;
 }

 section {
     width: 640px;
     float: left;
 }

 .post-container {
     width: 100%;
     position: relative;
     margin-bottom: 30px;
 }

 .post-image img {
     max-width: 100%;
     z-index: 1;
 }

 .post-content {
     position: relative;
     left: 30px;
     width: 580px;
     z-index: 2;
 }

 .thumbnail-positioning {
     bottom: 110px;
     margin-bottom: -110px;
 }

 .post-content p {
     line-height: 22px;
     margin-bottom: 15px;
 }

 .post-content img {
     max-width: 100%;
 }
 .post-meta h3 {
     text-transform: uppercase;
     font-size: 12px;
     color: white;
     margin-bottom: 3px;
     text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 }
 .post-meta a {
     color: white;
     text-decoration: underline;
     font-weight: bold;
 }

 .post {
     background-color: white;
     color: black;
     padding: 15px;
 }

 .post ol {
     list-style-type: none;
     list-style-type: decimal !ie;
     /*IE 7- hack*/
     margin: 0;
     margin-left: 3em;
     padding: 0;
     counter-reset: li-counter;
 }

 .post ol > li {
     position: relative;
     margin-bottom: 20px;
     padding-left: 0.5em;
     min-height: 3em;
     border-left: 2px solid #CCCCCC;
 }

 .post ol > li:before {
     position: absolute;
     top: 0;
     left: -1em;
     width: 0.8em;
     font-size: 3em;
     line-height: 1;
     font-weight: bold;
     text-align: right;
     color: #464646;
     content: counter(li-counter);
     counter-increment: li-counter;
 }

 .post p:last-child {
     margin-bottom: 0 !important;
 }

 .post h1 {
     font-size: 34px;
     text-transform: uppercase;
     font-weight: bold;
     margin-bottom: 7px;
 }

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

 .page {
     width: 550px;
     margin: 0 auto;
     background-color: white;
     padding: 15px;
 }

 .page p {
     line-height: 22px;
     margin-bottom: 15px;
 }

 .page h1 {
     font-size: 34px;
     text-transform: uppercase;
     font-weight: bold;
     border-bottom: 1px solid black;
     margin-bottom: 7px;
 }

 .leftimage {
     margin: 0 10px 2px -50px;
     float: left;
 }

 .leftcaption {
     margin: 3px 0 0 80px;
     font-style: italic;
     font-size: 11px;
     width: 220px;
 }

 .leftimage img {
     max-width: 300px;
 }

 .rightimage {
     margin: 0 -50px 2px 10px;
     float: right;
 }

 .rightcaption {
     margin: 3px 80px 0 0;
     font-style: italic;
     font-size: 11px;
     width: 220px;
 }

 .rightimage img {
     max-width: 300px;
 }

 aside {
     width: 290px;
     float: right;
 }

 aside h1 {
     color: white;
     font-size: 28px;
     border-bottom: 1px solid white;
     text-transform: uppercase;
     font-weight: bold;
     margin-bottom: 10px;
 }

 aside .widget {
     margin-bottom: 20px;
 }

 aside ul li {
     margin-bottom: 10px;
 }

 aside ul li a {
     font-size: 19px;
     color: white;
     text-decoration: none;
 }

 aside ul li a:hover {
     font-size: 19px;
     color: black;
     background-color: white;
     text-decoration: none;
 }

input[type=text]{
    width: 100%;
    background-color: white;
    color:#505358;
    font-size: 18px;
}

 footer {
     width: 100%;
 }

 footer .widget {
     width: 300px;
     float: left;
     margin-bottom: 20px;
     padding-right: 20px;
 }

 footer h1 {
     color: white;
     font-size: 28px;
     border-bottom: 1px solid white;
     text-transform: uppercase;
     font-weight: bold;
     margin-bottom: 10px;
 }

 footer ul li a {
     font-size: 19px;
     color: white;
     text-decoration: none;
 }

 footer ul li a:hover {
     font-size: 19px;
     color: black;
     background-color: white;
     text-decoration: none;
 }

 .alignleft {
     float: left;
     margin: 0 10px 2px -45px;
 }

 .alignright {
     float: right;
     margin: 0 -45px 2px 10px;
 }

 .fix {
     clear: both;
 }

Answer 1

这是一个错字："type/css"而不是"text/css"。 Chrome忽略了这个问题，Firefox不是。

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/reset.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />

会解决你的问题。

CSS不在Firefox中链接

1 个答案: