IE problem with CSS file

问题:

After the upload of a new site version to the Production environment - the site is displayed incorrectly in IE, tested versions 6 and 8.

While on the local version of the site (UAT environment) everything is fine.

After the short investigation I found out that IE just changes the CSS file itslef. It is starting from ~line 1740 with the follwing:

in the correct CSS version:

   .add-topic-form .title,
   .add-topic-form .tags,
   .add-topic-form .original_author,
   .add-topic-form .original_link,
   .add-topic-form .link-url {
     margin-top: 5px;
     width: 95%;
   }

   .add-topic-form .poll-day,
   .add-topic-form .file {
     margin-top:5px;
   }

   .add-topic-form .file {
     display: block;
   }

   .add-topic-form .error {
     margin-bottom: 20px;
     background-color: #FFE6E6;
     padding: 20px;
     text-align: center;
   }

in the CSS version I download through the IE I get:

   .add-topic-form .title,
   .add-topic-form .tags,
   .add-topic-form #5742:  #5b3_hor a:   .add-topic-form #5742:  #5b3_k,
     dd-topic-form #574k,
-(..
     margin-top: 5px;
   }
idth: 90%;5%   }

   .add-topic-form .toll-votday     dd-topic-form #574e-ho
     margin-top: 5p;
   }

   .add-topic-form .tite-ho
     display: block;
   }

   .add-topic-form .titerror
     margin-bottom: 20px;
   }
ackground-color: #FED6FE6E
     padding: 20px;
     text-align: center;
   }

And the same kind of mess happens until the end of the CSS file. If anyone has met such a behavior before and know possible reasons - please, let me know.

UPD:

Thanks to all who answered. Found out that the problem was not only in IE, but in all browsers. Probably it was cache used in all except IE, that is why I misinterpret that the problem was in IE.

So finally I fixed the problem by using the other parameters for archiving in 7z. I used before Vocabulary size: 32Kb, Word length: 32 and it was working fine until the todays update. So I changed the parameter Word length to 16 and it fixed the problem. I'm not sure why it is not working with 32, maybe something was changed on the hoster side, because it was always working fine before. If anyone have an idea - please, put a comment. The problem is solved, but it would be great to understand what changed in the environment that created a problem. PS on the local machine it was working fine as earlier, so the problem appeared only on the pro environment.

回答1:

It looks that way in Opera, Chrome and Firefox on my (linux) machine too. It's not related to IE. The css must have been messed up somehow on the server.

There's quite a few - symbols in the css making me think of a diff output. Could there have been a merge that have been incorrectly committed?

If that link looks okay to you, there must be something terribly wrong with the encoding (although I cannot get how an encoding error could cause the effect we're seeing).

回答2:

Without any other information, my first thought is compression gone wrong. Check your compression/gzip settings on your server and see if it's sending compressed to IE. I know IE6 doesn't play well with gzip compression. It's worth checking, at least.

Another thing you could try (and yes, it sounds dumb, but sometimes it works) is to retype the offending lines (start with the first one that fails) and see if that fixes things. Sometimes, a stray invisible character gets thrown in and screws with things.

Edit - I noticed your response comments, as well as your domain name. Try setting the character set in your CSS file using the @charset rule. You might have to play around with the character sets to get it right, though I'd start with @charset "utf-8". It's possible your local machine is running with an incompatible (or just different) character set to your server and that's where the issues are stemming from.