CSS does not load in Internet explorer

2019-05-11 01:57发布

问题:

So I am practicing HTML and CSS and doing some simple things like changing the color of the background in CSS. The problem is that when I load the page in Internet Explorer (IE 11) no changes show up. To test this further I loaded my page in Goggle Chrome and it displayed the page as expected.

This has happened a few times and I tried to make sure I deleted the cache in Internet Explorer, I made sure I was editing the right file and that the CSS style code was in the same directory. I made sure I did an Crtl + R / Crtl F5 refresh and it doesn't work. The weird thing though is that after loading it a few times in the past it works without me doing anything else.

Here is what I am trying to display:

HTML FILE:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lesson 12 - Fun With CSS Selectors</title>
  <link type="text/css" rel="stylesheet" href="styles.css" media="all">
</head>
<body>

<h1>Title of the page</h1>

<p>Lorem ipsum dolor sit amet ultricies. Nunc at aliquet nunc.</p>

</body>
</html>

CSS FILE:

h1{
    font-size: 30em;
    font-weight: heavy;
    font-color: red;
    line-height: 10px;
}

body{
    background-color: red;
}

The font color does not change in the h1 tag (probably because its not how you do it) but the background color changes in Google Chrome as well as the size of the font. In Explorer it remains a white page with the H1 tag content unchanged. Does anyone have any ideas on what could be happening?

UPDATE:

As of now when I load my page now in Internet Explorer 11 it now has the changes from the style CSS, but I changed nothing! I just opened it again... Can anyone explain what is going on, because this has happened multiple times

回答1:

Per your comments, seems as your problem is caching in IE.

You can try instructing the browser not to cache with some META keywords such as pragma and expires.

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1"/>

Take a look at this article - So you don't want to Cache, Huh?

And this question which suggests using this cross-browser solution:

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

Hope this helps!



回答2:

We had this issue with Internet Explorer 11, it's weird but if you rename the stylesheet to anything without the word "style" it will start working!

This is only the case when the accessing the file locally, on a web server it seems to work fine



回答3:

Replace font-color with color. And try an inline <style>body {background-color:#FF0000;} </style> to see if maybe the stylesheet isn't loaded properly.



回答4:

I do not know if anyone still trace this problem, but I was also confronted with them. I am developing a django application. My CSS file named "style.css" was loading correctly (at least the inspector of google chrome told me that), but had no effect on my page. It cost me a great deal of time to figure out, as RayLau135 mentioned above, that you have to rename the CSS file to a name without "style". For sure, this is not a solution, but indeed a work around to deal with this problem and to save a lot of time and nerves.