指定PHP文件名时CSS正常加载，省略文件名则失效的问题求助

嘿，这个问题我太熟了！十有八九是相对路径解析不一致搞的鬼，我帮好几个朋友排查过类似的情况，给你拆解下原因和解决办法：

问题根源 #

当你访问 localhost:4000/website/index.php 时，浏览器会把当前页面的基础路径认定为 /website；但访问 localhost:4000/website 时，服务器通常会把这个请求当成目录访问，浏览器的基础路径会变成 /website/（带末尾斜杠）——如果你的CSS链接是相对路径（比如 css/style.css），这时候浏览器会错误地请求 localhost:4000/css/style.css 而不是 localhost:4000/website/css/style.css！你可以打开浏览器F12的「网络」面板，看看CSS的请求URL是不是404了，一查一个准。

快速解决办法 #

1. 改用绝对路径（最稳妥） #

把你的CSS链接改成从网站根目录开始的绝对路径，比如：

<link rel="stylesheet" href="/website/css/style.css">

或者用PHP动态生成根路径，避免硬编码：

<?php
// 获取网站根目录的路径部分
$base_url = '/website/';
?>
<link rel="stylesheet" href="<?php echo $base_url; ?>css/style.css">

这样不管你访问的是带文件名还是不带文件名的地址，浏览器都会从正确的位置请求CSS。

2. 添加<base>标签统一路径规则 #

在HTML的<head>里添加一个<base>标签，指定所有相对路径的基准URL：

<base href="http://localhost:4000/website/">

之后所有的相对路径（CSS、图片、链接）都会基于这个基准URL解析，不用再逐个改路径。不过要注意：这个标签会影响所有相对路径，所以要确保你的所有资源都符合这个基准路径。

3. 配置服务器自动补全目录斜杠 #

如果用的是Apache，确保httpd.conf里开启了DirectorySlash On（默认是开启的），这样访问目录时服务器会自动重定向到带末尾斜杠的地址，浏览器就能正确识别基础路径；如果是Nginx，可以加一条rewrite规则：

rewrite ^([^.]*[^/])$ $1/ permanent;

这样访问localhost:4000/website时会自动跳转到localhost:4000/website/，路径解析就一致了。

验证方法 #

打开浏览器开发者工具（按F12），切换到「网络」标签，刷新页面看看CSS的请求状态：如果是200就是正常，404的话就看请求URL是不是和预期的一致，根据这个调整路径就行。

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