在 Chrome 中，我的网站运行正常。但出于某种原因，在 Firefox 中，CSS 没有任何链接，我终究无法弄清楚原因。
当我进入检查器时，Firefox 中唯一不同的是，浏览器添加了一个 </link>。到 CSS 链接的末尾，但我无法摆脱它，因为我实际上并没有对其进行编码。
有谁知道可能导致此问题的原因吗？
网站是:http://www.renegademagsu.com
这是我的 header 部分 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;
}
最佳答案
这是一个拼写错误:“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" />
会帮你解决问题的。
关于html - CSS 不在 Firefox 中链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23389274/