CSS 样式表在一个位置工作，但不在另一个位置答案

【问题标题】：CSS stylesheet working from one location but not anotherCSS 样式表在一个位置工作，但不在另一个位置
【发布时间】：2018-07-03 08:38:13
【问题描述】：

我一直在开发一个只使用 HTML 和 CSS 的基本网站。这些文件被保存到网络位置，并且在不同浏览器中预览时工作正常。我在工作中做这个，所以我想把它带回家继续工作。我将所有文件复制到记忆棒中，保持结构不变，因此文件路径没有改变，即使是完全相同的代码，样式表也突然无法正常工作。

有些样式表可以正常工作，比如文本颜色和背景图片，所以我知道它正在被看到，但布局却搞砸了。我使用的是同一个浏览器，所以我不明白为什么样式从一个位置打开时有效，但从另一个位置打开时只有一半有效。正如我所说，我检查了文件路径，这不是问题。

此外，我将文件复制到桌面上与原始位置不同的位置，它们又搞砸了，但方式不同。我将记忆棒中的文件复制回网络，它又被搞砸了。

这些是完全相同的文件，所以我不明白为什么有时它工作正常而有时却不行。如果有人能提供一些见解，那就太好了！

body {
	font-family: Tahoma, Geneva, sans-serif;
	background-color: #404040;
	background-image: url("Pictures/background.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: #ffffff;
	padding: 5px;
}

#main {
	width: 75%;
	margin: auto;
}

header{
	width: 100%;
	background-color: #404040;
	opacity: 0.9;
	filter: alpha(opacity=90);
	padding-top: 5px;
}

#logo {
	width: 300px;
	padding: 5px;
	border: none;
}

#title {
	text-align: center;
	border-top: solid 7px #DDD;
	border-bottom: solid 7px #DDD;
	line-height: 0.5;
	padding-bottom: 20px;
}

#title h1 {
	font-size: 4.68em;
	font-weight: normal;
}

#title p {
	color: rgb(63,174,42);
	font-size: 1.37em;
}

nav {
	width: 100%;
	overflow: auto;
	background-color: #404040;
	opacity: 0.9;
	filter: alpha(opacity=90);
	border-bottom: 2px solid white;
}

#menu {
	list-style-type: none;
	margin: 0;
	padding-top: 15px;
	padding-bottom: 15px;
	float: right;
}

.menubutton {
	display: inline;
	padding-top: 15px;
	padding-bottom: 15px;
	border-left: 5px solid #404040;
	border-right: 5px solid #404040;
}

.menubutton a {
	color: white;
	padding: 15px;
	text-decoration: none;
	font-weight: bold;
}

.menubutton:hover {
	background-color: rgb(133,15,102);
}

.menubutton a:hover {
	color: white;
}

#current {
	display: inline;
	padding-top: 15px;
	padding-bottom: 15px;
	border-left: 5px solid rgb(133,15,102);
	border-right: 5px solid rgb(133,15,102);
}

#current a {
	color: white;
	padding: 15px;
	text-decoration: none;
	font-weight: bold;
}

#current:hover {
	background-color: rgb(133,15,102);
}

#current a:hover {
	color: white;
}

section {
	width: 100%;
	background-color: #404040;
	opacity: 0.9;
	filter: alpha(opacity=90);
	padding-bottom: 5px;
}

aside {
	width: 25%;
	float: left;
	padding: 10px;
}

.sidebarpost {
	width: 90%;
	margin: auto;
	border: 2px solid rgb(133,15,102);
	border-radius: 5%;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 10px;
}

article {
	width: 65%;
	float: right;
	margin-right: 35px;
}

article h1, h2, h3, h4, h5, h6 {
	color: rgb(63,174,42);
	font-weight: normal;
}

h1 {
	font-size: 2em;
	padding-top: 10px;
	text-align: center;
}

h3 {
	font-style: italic;
	font-size: 23px;
}

h4 {
	font-size: 18px;
}

.post {
	padding: 10px;
	border-bottom: 2px solid;
	border-color: rgb(133,15,102);
}

#lastpost {
	padding: 10px;
}

#marathon {
	width: 65%;
	display: block;
	margin: auto;
	text-align: center;
}

a {
	color: white;
}

a:hover {
	color: rgb(133,15,102);
}

.date {
	font-style: italic;
	font-size: 12.5px;
}

table {
	padding: 5px;
}

tr {
	padding: 10px;
}	

td {
	padding: 10px;
}

section:after {
	content: "";
	display: table;
	clear: both;
}

@media (max-width: 600px) {
	aside, article {
        	width: 100%;
        	height: auto;
    	}
}

footer {
	width: 100%;
	border-top: 2px solid white;
	padding-top: 25px;
	padding-bottom: 25px;
	background-color: #404040;
	opacity: 0.9;
	filter: alpha(opacity=90);
}

footer p {
	text-align: center;
	color: rgb(63,174,42);
}

<!DOCTYPE HTML>
<html>

<head>
  <title>CCL HOMEPAGE</title>
  <meta name="description" content="website description" />
  <meta name="keywords" content="website keywords, website keywords" />
  <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

	<div id="main">

		<header>

			<a href="index.html"><img src="Pictures/Logo.png" id="logo"></a></ br>
			<div id="title">
			<h1>One Step Ahead</h1>
			<p>Digital Forensics, Data Analytics and Cyber Security</p>
			</div><!--title-->

		</header>
	
		<nav>
			<ul id="menu">
				<li id="current"><a href="index.html">Home</a></li>
				<li class="menubutton"><a href="news.html">News</a></li>
				<li class="menubutton"><a href="sops-policies-forms.html">SOPs, Policies and Forms</a></li>
				<li class="menubutton"><a href="official-drive.html">Official Drive</a></li>
				<li class="menubutton"><a href="focalpoint.html">FocalPoint</a></li>
				<li class="menubutton"><a href="hr.html">HR</a></li>
			</ul><!--menu-->			
		</nav>

		<section>

			<aside>
			
				<div class="sidebarpost">
					<h3>Latest News</h3>
					<h4>NEW INTRANET LAUNCHED</h4>
					<p class="date">July 2nd, 2018</p>
					<p>2018 sees the redesign of our intranet. Take a look around and let us know what you think.</p>
				</div><!--sidebarpost-->

				<div class="sidebarpost">
					<h4>Useful Links</h4>
					<ul>
						<li><a href="path">Contracted Clients</a></li>
						<li><a href="path">Sales Clients</a></li>
						<li><a href="path" target="0">Focal Point</a></li>
						<li><a href="http://www.google.co.uk" target="0">Google</a></li>
					</ul>
				</div><!--sidebarpost-->

			</aside>
			
			<article>
			
				<div class="post">
					<h1>Homepage Launch</h1>
					<p>Welcome to CCL's Homepage. The homepage will be updated with Company news and have pages that aid with access to the most up to date SOP's, policies, procedures and documentation for the business.</p>
				</div><!--post-->

				<div class="post">
					<h2>Dragon Boat Racing</h2>
					<p class="date">July 2nd, 2018</p>
					<p>There are a limited number of spaces left on this year's Dragon Boat Racing team! The event takes place on 16th September. If you're interested in joining, please email . Click <a href="https://www.theshakespearehospice.org.uk/EventEnhanced/200/DragonBoat2018" target="0">here</a> for more information about the day.</p>
					<p>There's also a home made cake up for grabs for the person who comes up with the best team name!</p>
					<p>The team so far is:
						<ul>
							<li></li>
						</ul>
					</p>
				</div><!--post-->					
				
				<div class="post">
					<h2>Blog Posts</h2>
					<p><a href="https://cclgroupltd.com/defence-cases" target="0">‘Defence Cases’</a> written by Jason Dickson</p>
					<p><a href="https://cclgroupltd.com/the-new-nokia-3310-part-1/" target="0">‘The New Nokia 3310: Part 1’</a> written by Arun Prasannan</p>
				</div><!--post-->

				<div id="lastpost">
					<h2></h2>
					<p></p>
				</div><!--lastpost-->
			
			</article>

		</section>

		<footer>
			<p>For any updates or additions, please email </p>
		</footer>

	</div><!--main-->

</body>
</html>

更新：刚刚看到这只是IE11的问题，不幸的是这是它需要运行的浏览器。

更新：当我在 IE11 中打开开发者工具时，它显示 html 没有正确加载。我有一个屏幕截图来显示控制台中的代码和我的源代码之间的区别。我认为这是问题所在，因为布局元素（例如和）在其中的实际内容之前被关闭，但是从文本文档中可以看出，这不是我的编程方式。任何想法为什么会这样做？

【问题讨论】：

你能添加你的代码吗
有助于查看您如何链接文件，因此请显示您的代码和您正在使用的当前结构。
抱歉，希望以上修改对您有所帮助
您是否尝试过在<head> 中嵌入样式？
@carkod 我没有，因为我认为这会导致它运行得更慢？我认为只有当它只是一小部分 css 时才可取

标签： css file-location

【解决方案1】：

原来是兼容模式设置。不知道为什么这些在一个标签中而不是在另一个标签中，但它现在可以工作了。

【讨论】：