在IE10开发版本和发布版本之间的CSS行为差异 [英] CSS behavior difference between development version and published version in IE10

问题描述

我们已经创建了一个ASP.NET网站，到目前为止，我们已经使用了一些CSS一直很好。我们测试在虚拟机的IE中10.0.9200.16899。现在，我们已经公布在网站我们的开发服务器上的IIS 7的测试目的，当我打开虚拟机上的网站（打开同一个浏览器），有布局的差异;有的严重，有的不那么。

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.

要举例说明：（1）我们正在使用Infragistics的组件，它们的造型似乎是非常接近原来的大部分（字体大小有些差别，符号大小，...，但非常小）。

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）引导导航栏下面的悬停过渡工作，从Visual Studio中启动，但不能与开发服务器上部署的版本在网站上。颜色是正确的，虽然和悬停颜色改变为好;它是缺少在部署版本的过渡。

(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）我风格一个按钮有上的背景渐变的顶部左侧渐变背景和图像（图标），以及一种圆角。但是在部署的版本，整个按钮变灰，图像丢失了，我不能让出圆角。 CSS的其余工作正常，但是，据我所看到的。

(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 */
}

这是我第一次发布网站，到目前为止，我一直认为，风格的差异，主要是关乎于浏览器的品牌和版本的差异。不过这个问题有别的东西，也许IIS相关？至于为什么这会相差这么多的任何建议或想法是极大的AP preciated。不知怎的，（2）和（3）似乎隐约相关，因为这两个梯度和过渡动画是什么，我会天真地认为的需要某种形式的渲染。

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".

能否IIS版本之间的差异是什么原因呢？ Visual Studio中似乎承载在IIS防爆preSS应用（我怎样才能找出版本？我看到IIS防爆preSS 8.0安装，但在我的项目属性只是说：IIS前preSS ），而服务器托管网站已安装IIS 7.0。任何输入或想法是极大的AP preciated！

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!

推荐答案

您可能有两种compatabiity模式的浏览器之一，或正在使用的F12开发人员工具，以使其作为一个旧版本的IE /怪癖模式。

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.

这篇关于在IE10开发版本和发布版本之间的CSS行为差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！