个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 01:27:46 24 4
gpt4 key购买 nike

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

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

此外，我将文件复制到桌面上与原始位置不同的位置，它们再次搞砸了，但方式不同。我把内存棒里的文件复制回网络，又乱了。

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

enter image description here 

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。我有一个屏幕截图来显示控制台中的代码和我的源代码之间的区别。我认为这是问题所在，因为诸如 和 之类的布局元素在它们内部的实际内容之前被关闭，但是从文本文档中可以看出，这不是我编程的方式。知道为什么要这样做吗？

enter image description here

最佳答案

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

关于CSS 样式表在一个位置工作，但不能在另一个位置工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51150095/

24 4 0
文章推荐： c++ - 为什么 g++ 在未执行的代码处标记一个转换错误？
文章推荐： javascript - 使用 Angular 有条件地启用 Bootstrap 子菜单
文章推荐： html - 使用 htaccess 将带有 GET 变量的 URL 重写为页面标题
文章推荐： css - AMP 字体不工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com