如何让CSS样式表在带/不带index.html的URL下均生效？

问题核心是相对路径解析逻辑差异：当URL为HTTP://server/system/webdev/proj时，服务器会将proj识别为文件而非目录，页面里的相对路径stylesheet.css会被解析为HTTP://server/system/webdev/stylesheet.css（向上一级目录查找）；而带结尾斜杠的URL明确告知浏览器proj是目录，相对路径会正确指向proj下的文件。

以下是三种可行解决方案：

• 使用根相对路径引用CSS
  直接将样式表引用改为从网站根目录出发的绝对路径，无论URL结构如何，都能精准定位文件：

<link rel="stylesheet" href="/system/webdev/proj/stylesheet.css">

优点是简单直接，无需依赖服务器配置；缺点是项目部署路径变更时需手动修改路径。

• 设置<base>基准标签
  在HTML的<head>中添加<base>标签，指定所有相对路径的基准URL（注意路径必须以斜杠结尾）：

<head>
  <base href="/system/webdev/proj/">
  <link rel="stylesheet" href="stylesheet.css">
</head>

此后所有相对路径都会基于/system/webdev/proj/解析，无论URL是否带斜杠，样式表都能正常加载。

• 服务器端重定向（推荐方案）
  配置服务器，让不带结尾斜杠的目录请求自动重定向到带斜杠的版本，从根源统一URL结构：
  • Apache服务器：在项目根目录的.htaccess文件中添加规则：

    RewriteEngine On
    # 仅对非文件的请求生效，避免重定向真实存在的文件
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*[^/])$ /$1/ [L,R=301]
    

  • Nginx服务器：在站点配置中添加rewrite规则：

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

该方案能统一URL格式，不仅解决CSS加载问题，还能避免重复内容（对SEO友好），是最规范的解决方式。

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