CSS 在 Firefox 中不起作用答案

【问题标题】：CSS not working in FirefoxCSS 在 Firefox 中不起作用
【发布时间】：2016-07-25 18:46:57
【问题描述】：

当我在 Firefox 中打开我的页面时，没有应用 Css。但是它确实可以在 google chrome 中使用。以下是详细信息：

HTML：

<!DOCTYPE html>    
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>    
    <link type="text/css" href="Style.css" rel="stylesheet">   

</head>
<body>
<div id="content">
    <p>
        Lorem ipsum dolor sit amet, dolorem fierent vim ea. Duo no discere
        voluptatum. Eum eu adhuc appareat, dolores imperdiet sea ea. Pri ut
        cetero consectetuer, ad populo sensibus ius. Nominavi persecuti pro ad,
         bonorum imperdiet moderatius cu cum, tollit tritani numquam ex qui.

           </p>

</div>

   </body>
</html>

外部 CSS：Style.css

 #content{
    width:300px;
    height:500px;
    background:#e3e3e3;
    border:1px solid #666;
    margin-top:40px
    }

    #content p{
    padding:20px;
    }

【问题讨论】：

似乎在 Firefox 中运行良好。这是一支笔codepen.io/anon/pen/JKvwdb 有什么特别的东西不工作吗？
</link> 无效。您似乎将 CSS 元素包含在 <link></link> 中，这是错误的。像这样的内部 CSS 应该包含在 <style></style> 标记中。
您的 HTML 无效。无效的 html 在不同的浏览器中可能有随机行为。修复您的链接和样式标签。您不需要内部 css 的外部链接元素。它需要包含在样式标签中。
这是一个令人费解且令人困惑的问题。您如何提供指向实际示例的链接或添加代码片段。
它在 Firefox 中就像一个魅力：jsfiddle.net/cne4c7gk Style.css 与 html 文件在同一个文件夹中？

标签： html css google-chrome firefox web-frontend

【解决方案1】：

只需在 CSS 周围添加样式标签：

<style>
#content{
width:300px;
height:500px;
background:#e3e3e3;
border:1px solid #666;
margin-top:40px
}

#content p{
padding:20px;
}
</style>

【讨论】：

【解决方案2】：

link 标签应该用于将 HTML 页面链接到单独的 CSS 样式表。您不能将 CSS 插入 link 标记。为此，只需使用style 标签：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="Style.css" type="text/css" />
<style>
#content{
width:300px;
height:500px;
background:#e3e3e3;
border:1px solid #666;
margin-top:40px
}

#content p{
padding:20px;
}
</style>
<style id="web-developer-edit-css-styles-0" class="web-developer-edit-css-styles" xml:base="/C:/Users/user1.Data/Desktop/CssNoobToNinja/CssNoobToNinja/">
</head>
<body>
<div id="content">
<p> Lorem ipsum dolor sit amet, dolorem fierent vim ea. Duo no discere voluptatum. Eum eu adhuc appareat, dolores imperdiet sea ea. Pri ut cetero consectetuer, ad populo sensibus ius. Nominavi persecuti pro ad, bonorum imperdiet moderatius cu cum, tollit tritani numquam ex qui. </p>
</div>
</body>
</html>

【讨论】：

【解决方案3】：

如果您打算只使用内联 css，只需使用 <style> 标记，如下所示：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title></title>
<style>

#content{
  width:300px;
  height:500px;
  background:#e3e3e3;
  border:1px solid #666;
  margin-top:40px
}

#content p{
  padding:20px;
}
</style>
<style id="web-developer-edit-css-styles-0" class="web-developer-edit-css-styles" xml:base="/C:/Users/user1.Data/Desktop/CssNoobToNinja/CssNoobToNinja/">
</head>
<body>
<div id="content">
<p> Lorem ipsum dolor sit amet, dolorem fierent vim ea. Duo no discere voluptatum. Eum eu adhuc appareat, dolores imperdiet sea ea. Pri ut cetero consectetuer, ad populo sensibus ius. Nominavi persecuti pro ad, bonorum imperdiet moderatius cu cum, tollit tritani numquam ex qui. </p>
</div>
</body>
</html>

编辑：大脑袋放屁，把<script> 换成<style> 现在修复了

【讨论】：

?你确定吗？
您没有为此使用<script> 标签。你使用了<style> 标签。
为什么在脚本标签中？
是的，脑子里放了一个大屁，写的是剧本而不是风格，我的错。