为何末尾带斜杠的不存在目录会导致404页面CSS加载失败？

当访问带末尾斜杠的URL（比如https://www.mentat.com.au/abc/）时，浏览器会默认将当前路径识别为abc子目录。如果你的404.php页面里引用CSS、JS等资源用的是相对路径（比如style.css、css/main.css），浏览器就会尝试从/abc/这个不存在的子目录加载资源（比如请求/abc/style.css），自然找不到这些文件，导致样式失效。

而访问不带斜杠的/abc时，浏览器会认为当前处于网站根目录，相对路径的资源会从根目录加载，所以样式能正常显示。

1. 改用绝对路径引用资源 #

把所有CSS、JS、图片的引用路径前加上斜杠，强制从网站根目录加载：

• 例如将 <link rel="stylesheet" href="style.css"> 修改为 <link rel="stylesheet" href="/style.css">
• 将 <script src="js/main.js"></script> 修改为 <script src="/js/main.js"></script>

2. 添加<base>标签统一路径基准 #

在404.php的<head>标签内添加一行代码，让页面所有相对路径都以网站根目录为基准：

<base href="/">

这样不管当前URL是什么路径，浏览器都会从根目录查找相对路径的资源。

3. 优化.htaccess配置 #

ErrorDocument属于mod_core模块指令，和mod_rewrite无关，不需要用<IfModule mod_rewrite.c>包裹，直接修改为：

#### Assign 404 error page ####
ErrorDocument 404 /404.php

内容的提问来源于stack exchange，提问作者SunnyOz