大家好 - 我的工作有几个网站,都在内部托管。每个站点都直接位于Web服务器上wwwroot下的自己的文件夹中。这是我的问题:什么可能导致HTML文件在文件夹与文件夹之间的显示方式不同?
为什么我要问:我最近看到的网站在本地查看时看起来很棒。如果我将文件放在我们的主.com网站所在的文件夹中(并通过www地址查看),它会完美显示。但是 - 当我将文件放入它应该存在的相邻文件夹并通过网络查看时,该页面变得流氓。容器div无法保持其指定的宽度,并且无法在其中包含嵌套的div。这是一团糟。
只有当我通过网络查看网站时才会出现这种情况 - 如果我从同一个文件夹本地查看网站,那很好。我还做了一个基于表格的布局版本作为测试,并在网上查看时再次遇到文件夹到文件夹的显示问题。
我很难过为什么页面从一个文件夹中完美显示并且与另一个文件夹分开。我们的技术人员也很难过。我验证了HTML,所以我认为这不是罪魁祸首。这在IE和Firefox中都会发生,因此它不是浏览器问题。我唯一能想到的是它是一些服务器/文件夹设置,但我对“服务器内容”一无所知。
希望我已经清楚地解释了这一点。非常感谢您的帮助。
UPDATE:样式,.js文件等的路径都是相对的,但我正在移动整个文件夹结构 - 所有图像,所有css文件,所有脚本,所有内容。答复的答案。
更新#2:
所以你们都不认为我疯了 - 我尝试了一个实验:
我制作了一个简单的HTML文档并将其转储到我之前引用的两个文件夹中。这是代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul{
list-style-type:none;
}
li{
display:inline;
}
a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
background:#999900;
padding:5px;
border-right:1px solid #FFFFFF;
}
a:hover{
background:#CCCC00;
}
#buttonbox {
width: 768px;
background-color:#993333;
margin-left: auto;
margin-right: auto; }
</style>
</head>
<body>
<div id="buttonbox">
<ul>
<li><a href="#">Css</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">ActionScript</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">SQL Server </a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
<p> </p>
<table width="768" align="center" border="0" cellpadding="0" cellspacing="0"><tr><td bgcolor="#993333"><ul>
<li><a href="#">Css</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">ActionScript</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">SQL Server </a></li>
<li><a href="#">PHP</a></li>
</ul> </td></tr></table>
</body>
</html>
如您所见 - 它是水平导航栏的2个实例。第一个是带有背景颜色的div,第二个是带有背景颜色的表格行。请注意,没有链接文件 - 所有样式都在文档的头部。
以下是文件夹A与文件夹B显示方式的对比截图:
相同的文件,相同的浏览器,没有链接的样式,不同的结果。正如我之前提到的,这些是相同服务器上的相邻文件夹,每个文件夹都映射到不同的www地址。
同样,我感谢任何见解。感谢。
答案 0 :(得分:2)
正如Marc B所提到的,一个可能的答案是路径问题和一些缺少的样式导致页面在移动时呈现错误。
以下示例是指向样式表的 relative 链接(html文件所在目录下名为“css”的目录中名为“mystyles.css”的文件)。如果您移动了包含此链接的文件,您还需要移动名为mystyles.css的文件(及其包含的目录“css”)。
<link rel="stylesheet" type="text/css" href="css/mystyles.css">
答案 1 :(得分:0)
查看Firebug或Chrome开发者工具,了解控制台错误和警告。他们会向您显示任何缺失的资源并呈现错误。
如果没有任何不合适的地方,请比较这些工具中两个版本的CSS。