首页 > 解决方案 > 本地和互联网上的页面看起来不同

问题描述

当我使用 Chrome 浏览器在本地打开 index.html 文件时,它显示得和我编码的一样好。但是,当我访问网络上发布的index.html时,css坏了,它不起作用,我无法按右上角的菜单。它是同一个 Chrome 浏览器,但为什么会出现不同的结果?

标签: htmlcss

解决方案


您的问题不是很清楚(检查人们在评论中发布的链接),但听起来很可能您没有正确加载 CSS 文件。这可能是因为路径错误。检查您是否指定了绝对路径或相对路径(即 CSS 文件的路径是否以/? 开头)

例如:如果您有一个index.html文件,其 CSS 位于名为 的子目录中css,则您的路径需要是

<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

但是,如果您尝试从director 中的不同HTML 文件加载样式表posts,它将失败(因为该css目录不在目录内,posts而是在它旁边)。在这种情况下,您需要这个(注意../路径开头的额外内容表示先上一个目录):

<link rel="stylesheet" type="text/css" href="../css/stylesheet.css">

最通用的解决方案是使用绝对文件路径(以 开头/),如下所示:

<link rel="stylesheet" type="text/css" href="/css/stylesheet.css">

但是,这需要从根目录为您的网站提供服务,这可能是也可能不是(取决于您的本地文件系统的设置方式以及远程服务器和域的设置方式)。

基本上,您需要为您将要遇到的情况设置路径。


推荐阅读