Question

我正在构建一个简单的网站，并发现虽然CSS在Chrome（我通常使用）中运行良好，但它在Firefox或IE中根本不存在。因为它是一个带有图片和文字的空白页面，就像我没有写过任何CSS一样。 HTML加载很好，但显然根本没有使用CSS。

以下是我的所有HTML：

<!DOCTYPE HTML>

<html>

<head>
<title>Apple Tree House</title>
<link rel="stylesheet" type="css" href="stylesheet.css" />
<link rel="shortcut icon" href="root/icon.ico" type="image/ico" />

</head>
<body>

<div id="container">

<header>
<img src="root/logo.png" id="logo" width="300px" height="300px">
<h2>New Bed and Breakfast</h2>
<h1>Opening January 2015</h1>
<h4>Apple Tree House, Farndon Road, Woodford Halse, Northamptonshire</h4>
</header>

<div id="textcontainer">
---Basic text info here---
</div>

<footer>
<img src="root/footer.png" id="footbanner">
</footer>
</div>

</body>

</html>

我的CSS：

html, body{
margin: 0; 
padding: 0;

}

body {
background-color:#85A366;
font-family:Arial, Helvetica, Sans-serif;
font-size:12pt;
margin:0 auto;
padding-left:10px;
padding-right:10px;

}


#container{
width:80%;
height:100%;
padding-left:5px;
padding-right:5px;
padding-bottom:0px;
padding-top:0px;
text-align:center;
color:black;
background:#FFFFEE;
margin:0 auto;
font-family: Goudy Old Style,Garamond,Big Caslon,Times New Roman,serif;
font-weight:600;
font-style:italic;
font-size:13pt; 
color:#7D5833;

}

h1, h2, h3, h4, h5, h6 {
color:#472400;
}
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h4 { font-size: 24px; }

#textcontainer{

width:45%;
text-align:center;
margin:0 auto;
top:auto;
}

footer{ 
text-align:center;
height:100px;
 }
#footbanner { 
max-width:100%;
max-height:100%; 
}

@media screen and (max-width:420px) {
table{
 font-size:8pt;
 }
 #container {
    width:100%;
    }
 }

你可以在那里看到任何能让它在Chrome中运行但在其他浏览器中根本没有的东西吗？

Answer 1

<link/> type应为text/css而不仅仅是css，如下所示：

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

Answer 2

我这里没有专家，但它引起了我的注意，你曾经使用过＆＃css＆＃39;而不是＆text; / css＆＃39;。也许这会解决这个问题？

虽然奇怪的是这对我有用： http://prntscr.com/58m1fi

CSS在所有浏览器中根本不起作用

2 个答案: