IE10 开发版和发布版的 CSS 行为差异

Posted 2023-03-06

【中文标题】IE10 开发版和发布版的 CSS 行为差异

【英文标题】：CSS behavior difference between development version and published version in IE10

【发布时间】：2014-08-22 20:53:11

【问题描述】：

我们已经创建了一个 ASP.NET 网站，到目前为止，我们使用的小 CSS 运行良好。我们在 IE 10.0.9200.16899 中的 VM 上进行了测试。现在我们已经在 IIS 7 中的开发服务器上发布了网站用于测试目的，当我在 VM 上打开该网站（打开相同的浏览器）时，存在布局差异；有些严重，有些不太严重。

举个例子： (1) 我们使用的是 Infragistics 组件，它们的样式在大多数情况下似乎非常接近原始样式（字体大小、符号大小等方面存在一些差异...，但非常小）。

(2) 引导导航栏中的以下悬停过渡适用于从 Visual Studio 中启动的站点，但不适用于开发服务器上的已部署版本。但是，颜色是正确的，悬停颜色也会发生变化；这是部署版本中缺少的过渡。

.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 工作正常。

.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 相关？非常感谢任何关于为什么会有如此大差异的建议或想法。不知何故，(2) 和 (3) 似乎有点相关，因为渐变和过渡动画都是我天真地认为“需要某种渲染”的东西。

IIS 版本之间的差异可能是原因吗？ Visual Studio 似乎将应用程序托管在 IIS Express 中（我如何才能找到版本？我看到已安装 IIS Express 8.0，但我的项目中的属性只显示“IIS Express”），而托管该站点的服务器具有 IIS 7.0安装。非常感谢任何意见或想法！

【问题讨论】：

您是否对它们中的任何一个都有兼容性视图，或者您是否使用开发人员工具将它们呈现为早期版本/怪癖模式？

@BFDatabaseAdmin 你似乎在做某事。当我单击开发版本中的兼容模式图标时（现在它是蓝色的；我猜这意味着 ON？），该站点的行为方式相同 - 错误 - 方式。但是当我打开部署的版本时，没有兼容性图标：-/我会尝试找出如何在 html 中设置（或者不设置）兼容模式。

看一下 IE 开发者工具 (F12)，里面可能有一个设置关闭了。

【参考方案1】：

您可能有一个浏览器处于兼容模式，或者正在使用 F12 开发人员工具将其呈现为旧版本的 IE/怪癖模式。

【讨论】：

没有两个浏览器，但是，这让我很困扰。是同一个浏览器。我什至可以从 VS (F5) 中打开页面，然后在打开 IE10 中打开一个新选项卡以显示已部署的页面，它们有所不同。奇怪的是，在开发页面上打开on兼容模式会使其与部署版本一样糟糕，但我无法将其关闭。如果可能的话，我会尝试将页面设置更改为从不使用兼容模式，如果可行，请接受您的回答:)

您知道如何以编程方式禁用站点的兼容模式吗？或者至少让它默认关闭？由于开发者工具显示 IE10 的兼容性视图已启用，但我没有在任何地方设置此设置，并且将使用该站点的客户端根本无法打开/关闭此设置。

嗯...也许你的代码中有错误。我不认为有办法禁用它，但是如果代码中有大错误，它会默认打开。

我接受了您的回答，因为它正确地指出了发生这种情况的原因。不过，这不是代码错误；我发现检查了 IE 选项，该选项显示每个 intranet 站点都处于兼容模式。我似乎无法“修复”这个：/ 我可以设置“IE=edge”，但它以另一种方式破坏了我的设计，并且兼容性仍然存在。我希望我能找到另一种解决方法，但这似乎不太可能。禁用该选项是管理员必须在全局范围内执行的操作，并且由于 Intranet 中运行着许多旧应用程序，因此无法确定。

是的！一年前我自己也遇到过这个问题。