css - CSS 样式表在一个位置工作，但不在另一个位置

Question

我一直在使用 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’&lt;/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’&lt;/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 没有正确加载。我有一个屏幕截图来显示控制台中的代码和我的源代码之间的区别。我认为这是问题所在，因为布局元素（例如和）在其中的实际内容之前被关闭，但是从文本文档中可以看出，这不是我的编程方式。任何想法为什么会这样做？

score 0 · Accepted Answer

原来是兼容模式设置。不知道为什么这些在一个选项卡中而不是在另一个选项卡中，但它现在正在工作。

css - CSS 样式表在一个位置工作，但不在另一个位置

1 回答 1

Related

Reference