Html 使用 htaccess 重写规则重定向后未加载 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8221022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS not loading after redirect with htaccess rewrite rule
提问by algorithmicCoder
I have the following Short-hand for a user profile url
我有以下用户个人资料网址的简写
RewriteRule ^(\w+)/?$ ./profile.php?name_of_user=
The site is styled with the appropriate css file when i do site.com/name_of_user
当我这样做时，该站点的样式使用了适当的 css 文件 site.com/name_of_user
but not when i do site.com/name_of_user/
但不是当我做 site.com/name_of_user/
Although the redirect is to the right page...
虽然重定向到了正确的页面......
Help is appreciated!
帮助表示赞赏！
回答by Steve Lewis
the easiest way to fix this is to specify the full path to your CSS file in the <head>of the HTML file.
解决此问题的最简单方法是<head>在 HTML 文件的 中指定 CSS 文件的完整路径。
If your mod_rewrite rule is modifying the path to where your CSS file is, you'd also want to place this before your RewriteRule:
如果您的 mod_rewrite 规则正在修改您的 CSS 文件所在的路径，您还需要将它放在您的 之前RewriteRule：
RewriteCond %{REQUEST_FILENAME} !-f
This makes sure that the request doesn't match a file before rewriting it.
这可确保在重写文件之前请求与文件不匹配。
回答by Query
I had this same problem and have found the easiest and most practical solution.
我遇到了同样的问题，并找到了最简单、最实用的解决方案。
<base href="http://www.example.com/" />
It's super clean and easy to use.
它超级干净且易于使用。
回答by Chamika Sandamal
link the css files relative to the root directory sample:
链接相对于根目录示例的 css 文件：
<link rel="stylesheet" type="text/css" href="/css/****.css">
回答by anubhava
When your page URL is example.com/name_of_user/, loading of resource css/js/images may cause problems if your HTML page is using relative pathsfor these resources. It is because browser resolves resource URLs using current URL.
当您的页面 URL 为 时example.com/name_of_user/，如果您的 HTML 页面使用这些资源的相对路径，则加载资源 css/js/images 可能会导致问题。这是因为浏览器使用当前 URL 解析资源 URL。
So for example if a style tag is:
例如，如果样式标签是：
<link rel="stylesheet" type="text/css" href="static/style.css">
and your current page URL is:
并且您当前的页面 URL 是：
http://example.com/name_of_user/
Then browser will resolve css URL as as example.com/name_of_user/static/style.cssinstead of example.com/static/style.css. This will cause 404 for resource URLs and your page will be displayed without any style, scripts and images.
然后浏览器会将 css URL 解析为 asexample.com/name_of_user/static/style.css而不是example.com/static/style.css. 这将导致资源 URL 404，并且您的页面将在没有任何样式、脚本和图像的情况下显示。
You can solve this problem using one of the following ways:
您可以使用以下方法之一解决此问题：
Use absolute path in your css, js, images files rather than a relative one. Which means you have to make sure path of these files start either with
http://or a slash/.OtherwiseYou can add this just below
<head>section of your page's HTML:<base href="/" />
在您的 css、js、图像文件中使用绝对路径而不是相对路径。这意味着您必须确保这些文件的路径以
http://或 斜杠开头/。否则，您可以将其添加到页面 HTML 部分的下方
<head>：<base href="/" />
so that every relative URLis resolved from that base URL and not from the current page's URL.
这样每个相对 URL都是从该基本 URL 解析的，而不是从当前页面的 URL 解析的。
回答by uxmal
Try to set right basedir at your html documents head section:
尝试在您的 html 文档头部部分设置正确的 basedir：
<head>
<base href="http://example.com/">
<head>
Then any extra slashes (/) at your .htaccess rules won't change exterial sources path in your html documents. The following rule
那么 .htaccess 规则中的任何额外斜杠 (/) 都不会更改 html 文档中的外部源路径。以下规则
RewriteEngine On
RewriteBase /
RewriteRule ^(\w+)/?$ ./profile.php?name_of_user=
won't make this behaviour with <base href="http://example.com/">at document's <head>.
It will works fine, especially for relative site file structures.
不会使用<base href="http://example.com/">at 文档的<head>. 它将正常工作，尤其是对于相关站点文件结构。
回答by Thanh Siel
Try this:
尝试这个：
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)\.(gif|jpg|png|jpeg|css|js|swf)$ /public/. [L,NC]
# Removes index.php from ExpressionEngine URLs
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php/ [L,QSA]
</IfModule>
回答by Vijay Kumar Kanta
RewriteCond %{REQUEST_FILENAME} !-f
This works like a treat. I originally had problem even with giving absolute linking. Thanks and +1 to Steve Lewis.
这就像一种享受。即使提供绝对链接，我最初也遇到问题。感谢史蒂夫·刘易斯+1。
回答by anesupaul-developer
The easiest way is to use <base href="site url here">, and this should be soon after the opening HTML headtag.
Site url needs to start with http or https; if you are on localhost then use http, for example
最简单的方法是使用<base href="site url here">，这应该在打开 HTMLhead标记之后不久。网站url需要以http或https开头；如果您在本地主机上，则使用 http，例如
http://localhost/road/
回答by Ahmad Lone
Simply add the base path after the opening head tag. For example:
只需在开头标记后添加基本路径。例如：
<base href="website url here">
回答by John McMillan
I've had what seems to be the same problem. I was trying to redirect from a site of the form: www.foo/category/details.
我遇到了似乎同样的问题。我试图从以下形式的站点重定向：www.foo/category/details。
I found the slash after "category" stopped both the CSS and images from being loaded.
我在“类别”停止加载 CSS 和图像之后发现了斜线。
The cause is the default redirection passes the original URL to the browser. This can be seen from a JScript trace on window.location.pathname. The solution is simply to use a [R] flag in the rewrite rule.
原因是默认重定向将原始 URL 传递给浏览器。这可以从 window.location.pathname 上的 JScript 跟踪中看出。解决方案只是在重写规则中使用 [R] 标志。
