URL重写后CSS无法加载的问题求助（.htaccess相关）

问题原因 #

当访问www.example.co.uk/whatever/morethings这类多级URL时，浏览器会误以为当前所在目录是/whatever/，因此会把相对路径design/css-design.css解析成/whatever/design/css-design.css，但你的CSS文件实际存放在根目录的/design/下，自然找不到文件。

不用绝对URL的解决方案 #

方法1：添加<base>标签（推荐） #

在HTML页面的<head>中添加<base>标签，指定页面中所有相对路径的基准URL。这样不管当前URL层级如何，相对路径都会基于这个基准来解析。

如果要适配本地开发和线上环境，可以用PHP动态生成基准URL：

<head>
    <?php
    // 生成当前站点的基准URL
    $protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http';
    $base_url = $protocol . '://' . $_SERVER['HTTP_HOST'];
    
    // 本地开发时如果项目在子目录（比如localhost/myproject），追加子目录路径
    if ($_SERVER['HTTP_HOST'] === 'localhost') {
        $base_url .= '/myproject/'; // 替换成你本地项目的子目录名
    }
    ?>
    <base href="<?php echo $base_url; ?>">
    
    <!-- 原来的CSS引用保持不变 -->
    <link rel="stylesheet" type="text/css" href="design/css-design.css">
    <link rel="stylesheet" type="text/css" href="design/checkout.css">
    <link rel="stylesheet" type="text/css" href="design/css-mediaplayer.css">
</head>

这样所有相对路径都会自动指向根目录下的对应文件，不管访问的是一级还是多级URL。

方法2：使用根相对路径写法 #

把CSS的引用路径改成以/开头的根相对路径（本质是简化的绝对路径写法）：

<link rel="stylesheet" type="text/css" href="/design/css-design.css">
<link rel="stylesheet" type="text/css" href="/design/checkout.css">
<link rel="stylesheet" type="text/css" href="/design/css-mediaplayer.css">

这种写法无需PHP动态处理，但要注意本地开发时如果项目在子目录（比如localhost/myproject），可以通过Apache虚拟主机配置，将本地项目根目录直接指向项目文件夹，这样本地和线上的路径写法就能保持一致。

方法3：调整相对路径层级（不推荐） #

如果URL是两级（如/a/b），可以用../回到上一级目录：

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

但这种方法弊端明显：若URL层级变化（比如三级/a/b/c），就得改成../../design/...，维护成本高，不适合URL结构灵活的项目。

关于你的.htaccess配置 #

当前的.htaccess规则是正常的，已经允许存在的文件和目录直接访问，问题出在浏览器对相对路径的解析逻辑，因此不需要修改重写规则，仅需调整前端的路径引用方式即可。

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