以不同的方式使用 HTML5 JS 和 Twitter Bootstrap 格式托管 ASP.Net

Posted 2023-02-22

【中文标题】以不同的方式使用 HTML5 JS 和 Twitter Bootstrap 格式托管 ASP.Net

【英文标题】：Hosting ASP.Net with HTML5 JS and Twitter Bootstrap formats differently

【发布时间】：2012-06-06 11:32:23

【问题描述】：

在我的开发环境中，一切看起来都很好，我有一个使用画布和动画的饼图，当通过浏览器托管时，它看起来很好。

我也在使用 Twitter Bootstrap，在页面顶部有一个导航栏，里面有两个项目。

这里有一些例子：

在开发环境中

http://i.stack.imgur.com/TtC5J.png

在 IIS 中托管

http://i.stack.imgur.com/DNLkg.png

关闭 IIS 版本后，错误仍然存​​在，您还可以注意到按钮的圆角不太一样。

我们使用默认设置托管在 IIS6 上，所以想知道是否必须在网站上做任何事情才能正确地合并它？我没有在任何地方注册 .LESS，我不认为这是导致这种情况的原因。

提前致谢。

【问题讨论】：

您在同一个浏览器中查看它们？一个看起来像 IE9+（带圆角），另一个看起来像旧版本。

您是否收到任何客户端脚本或渲染错误？

我注意到了同样的事情。我的应用程序在具有 IE8 的服务器 (IIS6) 上显示不同，并在具有 IE8 的 localhost 上查看它。颜色看起来略有不同，所有按钮都缺少边框颜色。

【参考方案1】：

您需要设置 X-UA-Compatible 元标记才能解决此问题。 将以下元标记添加到网页的标题中，问题应该得到解决

这将确保它在开发和 IIS 中看起来相同。 （使用相同的浏览器）

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

您还可以在 web.config 中添加以下指令，以在应用程序范围内添加自定义标头而不是每页元标记。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
   <system.webServer>
      <httpProtocol>
         <customHeaders>
            <clear />
            <add name="X-UA-Compatible" value="IE=Edge" />
         </customHeaders>
      </httpProtocol>
   </system.webServer>
</configuration>

此行为是因为 IE 默认以兼容性方式呈现 Intranet 站点。 （因为微软认为很多 Intranet 网站已经过时了，我猜） 您可以通过转到工具 -> 兼容性视图设置来修改它。

参考资料：

http://weblogs.asp.net/rajbk/archive/2010/05/12/pages-in-ie-render-differently-when-served-through-the-asp-net-development-server-and-production-server.aspx http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx

【讨论】：

人们甚至可以使用chrome=1 解释here 或查看msdn doc。

完美！这对我有用。供其他人参考，这里是documentation on X-UA-Compatible。

太棒了！现在就可以了，谢谢+1

【参考方案2】：

听起来您正在使用 LESS，对吗？如果是这样，就像你提到的那样，如果你使用需要 LESS 的那些功能，你需要在 IIS 中设置它以使用 twitter boostrap。

我在 IIS 上遇到过类似的问题，并且当它们不是 IIS 中的默认值时，它可以正确识别文件扩展名。

可能是您的 localhost 对文件映射没有保护，或者您在本地使用的 IIS 版本与 IIS6 不同，并且它已经允许 .less扩展名。

要解决此问题，您需要添加到 IIS6 的扩展/映射。

短版

打开 Web 应用程序属性 点击

配置...

在

映射

标签下，点击

添加

可执行文件

：在“映射”选项卡下输入为 ASPX 扩展设置的相同值

扩展名

：.less

动词

：检查：Limit To，输入：GET,HEAD

脚本引擎

：选中

验证文件是否存在

：未选中

图形版本如果它对任何人都有帮助：这是一个链接，其中包含我在下面复制的详细信息，以防它消失。

http://wiki.uiowa.edu/display/~mbergal/2012/06/08/Configuring+IIS+6+to+support+dotlesscss+(LESS+CSS)

转到网站的属性。

打开配置

添加扩展程序