CSS behavior difference between development version and published version in IE10

问题

We have created an ASP.NET website, and so far the little CSS we have used has worked fine. We tested in on the VM's in IE 10.0.9200.16899. Now we have published the website on our development server in IIS 7 for testing purposes, and when I open up the site on the VM (opening the same browser), there are layout differences; some severe, some not quite so.

To give examples: (1) We are using Infragistics components, and their styling seems to be very near to the original for the most part (some differences in font size, symbol size, ..., but very small).

(2) The following hover transition in the bootstrap navbar works on the site that starts up from within Visual Studio, but not with the deployed version on the development server. The colors are correct, though, and the hover color changes as well; it's the transition that's missing in the deployed version.

.navbar-default .navbar-brand {
  color: #3b3b3b;
  transition: color 0.2s ease-out;
}

  .navbar-default .navbar-brand:hover,
  .navbar-default .navbar-brand:focus {
    color: #ff9900;
    background-color: transparent;
  }

(3) I styled a button to have a gradient background and an image (icon) on the left on top of the background gradient, as well as one rounded corner. But in the deployed version, the whole button is grayed out, the image is missing, and I can't make out a rounded corner. The rest of the CSS works fine, though, as far as I can see.

.MyButton {
  background: url("/img/SomeIcon.png") no-repeat 8px center, -ms-linear-gradient(top, #374a9a 0%, #061671 70%);
  border: none;
  border-top-right-radius: 5px;
  color: white;
  /* Some other font stuff and padding that still works fine */
}

It's my first time publishing a website, and so far I always thought that style differences were mostly related to differences in browser brands and versions. But this problem has to be something else, maybe IIS-related? Any suggestions or ideas as to why this could differ so much are greatly appreciated. Somehow (2) and (3) seem vaguely related, since both the gradient and the transition animation are something that I'd naively think of as "needing some sort of rendering".

Could a difference between IIS versions be the reason? Visual Studio seems to host the application in an IIS Express (How can I find out the version? I see IIS Express 8.0 installed, but the property in my project just says "IIS Express"), while the server hosting the site has IIS 7.0 installed. Any input or ideas are greatly appreciated!

回答1:

You probably have one of the browsers in either compatabiity mode, or are using the F12 developer tools to render it as an older version of IE/quirks mode.

来源：https://stackoverflow.com/questions/24524781/css-behavior-difference-between-development-version-and-published-version-in-ie1