CSS styles disappear if I type an argument after index.php

问题

My CSS styles stop working if I type any argument following my landing page index.php

I'm adding/testing new code on my development localhost server running xampp, coding in php/javascript/html/css. EDIT: my development server is Windows Vista, and I use Firefox version 10.0.1 right now.

Today I was adding mod_rewrite support to allow passing an argument with the URL for my site and stumbled on a problem I'd not thought to test before.

The mod_rewrite I was developing allows the user to specify a text string after the site name, such as:

     http://www.mysite.com/Stonehenge-artifact1

and my mod_rewrite processes that argument and does something meaningful -- specifically, it redirects from my landing page index.php to a totally different page that displays a photo of Stonehenge-artifact1.

The problem -- if the user types www.mysite.com/index.php/ialkselasdfa all my CSS styles disappear -- the index.php landing page special fonts and colors in my CSS stylesheet go missing.

I backed out all my mod_rewrite changes, including completely removing my custom .htaccess file in the mysite.com folder space (using a local custom copy of .htaccess is one of the steps for mod_rewrite).

I wanted to see if the CSS styles would disappear now that I was back to yesterday's (pre-mod_rewrite changes) code. Sure enough, my CSS stylesheet goes AWOL if I type an argument, ANY argument, after index.php.

So the following URLs (for example) somehow disable my CSS stylesheet for index.php

www.mysite/index.php/foo
www.mysite/index.php/css-whereAreYou

(NOTE: the reason I brought up the mod_rewrite is to explain why I'm typing something at the end of my site's URL in the first place. Were it not for me testing that new mod_rewrite code, I would not have found this problem.)

Here is my inclusion in my index.php of my CSS stylesheet:

<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <link rel="stylesheet" type="text/css" href="globalStyles.css" />
 </head>

My globalStyles.css is:

root { 
  display: block;
}

body
{
   color: black;
   font-family: Gill, Helvetica, sans-serif;
   font-size: 9pt;
   background-color: RGB(243,239,240); /* light blue */
} 

p
{
    color: black;    
}

Why is my index.php landing page not getting the CSS styles when I add characters after index.php?

回答1:

You could also use the <base> tag in the head section:

<base href="base/path/for/files/to/follow">

What this does is tell the browser that the path specified is the root directory, and relative paths should be requested relative to said directory.

I encountered this same issue with mod_rewrite (and, believe it or not, this solution came out of a Google search, though I had to dig a little).

回答2:

Because you are using a relative path to access the file, so when there are extra "directories" at the end of the URL, it tries to start in whatever directory because the browser doesn't know any better (that you rewrote the request path). Try changing it too:

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

Using an absolute path will keep it directing to the exact location of your CSS file, no matter what your URL might be.

For example: /index.php/foo will actually treat index.php as a directory and then foo as a sub-directory of index.php, making the path the browser tries to find your CSS file at: /index.php/foo/globalStyles.css.

回答3:

Use absolute paths rather than relative paths.

回答4:

Inside the following page:

www.mysite/index.php/foo

the following tag:

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

instructs the browser to look for a file called:

www.mysite/index.php/globalStyles.css

Obviously it isn't there. You should use absolute paths in your case:

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

Note that this could lead to another problem: the browser's request for:

www.mysite/globalStyles.css

might get converted/redirected by mod_rewrite to:

www.mysite/index.php/globalStyles.css

You should adjust your re-write rules to ignore .css, .js, .gif (etc) files. Alternately, use the RewriteCond's -f flag to make sure that file does not exist, then rewrite.

来源：https://stackoverflow.com/questions/9272944/css-styles-disappear-if-i-type-an-argument-after-index-php

标签

css

mod-rewrite