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

Answer 1

原来是兼容模式设置。不确定为什么这些选项卡在一个选项卡中而不是另一个选项卡中，但是现在可以使用了。

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

1 个答案: