Question

我遇到这个问题，我在开发环境中创建的Web应用程序在将其上传到Web服务器后显示不同。

我使用相同的浏览器和同一台机器来查看页面。唯一不同的是“服务器”。我正在使用.net 3.5，在我的开发环境中，页面是使用ASP.net开发服务器提供的。在Web服务器上，使用IIS 6.0提供页面。

我只有一个CSS文件包含在“App_Themes / Default”文件夹中，用于控制我应用程序中的所有CSS。

以下是一些不显示相同内容的内容：

1）我有一个可折叠的面板控件，当展开时应该显示在所有其他页面元素之上。在开发环境中，它的行为正确。在Web服务器上，面板在其他元素下滑动。

2）我的元素定义为背景和某个字体大小。在我的开发环境中显示时，文本显示在一行上。但是，在Web服务器上，即使文本大小相同，文本也会被包装。这就好像包含的div以某种方式呈现为“更小”。

3）开发环境和Web服务器之间没有固定宽度（因此宽度由按钮文本确定）的按钮宽度不同。服务器上的底部总是更宽。

我检查过以确保服务器和开发环境中的machine.config和global web.config中没有对其他CSS元素的引用。

我知道服务器正在从CSS中读取，因为一般来说，它看起来很相似（相同的颜色，背景，字体样式等）。这只是大小似乎是关闭和div的分层。

之前有没有人遇到此问题？我能找到什么想法？

Answer 1

看起来您正在Internet Explorer 8中对它们进行比较.Microsoft为本地和Internet服务器引入了不同的呈现模式，以便Web开发人员能够流泪。

如果没有X-UA兼容值且网站位于将呈现本地Intranet安全区域默认情况下，在EmulateIE7模式下。

添加兼容X-UA的标头或META以强制执行完整的IE8标准模式。

另见http://sharovatov.wordpress.com/2009/05/18/ie8-rendering-modes-theory-and-practice/

Answer 2

我们也遇到兼容模式的问题，所以我最后只是添加：

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

因为我知道它在IE7,8和9中运行良好。

Answer 3

我在Google Chrome中遇到了同样的问题。如果页面放大或缩小，显然媒体查询会搞砸。确保两个站点的缩放级别均为100％。

Answer 4

这至少听起来像生产服务器向HTML添加了xml声明或更改了导致页面以非标准兼容模式呈现的doctype。这也称为怪癖模式，你在MSIE中看到这个非常好的。您描述的症状可识别为box model bug in MSIE。

右键单击页面并检查HTML源代码。他们都完全相同吗？（包括元标记，xml声明，空格等）

如果您是从Windows到Linux的FTP，请确保您以二进制模式进行传输，以确保空白（空格，换行符）保持不变。另外，请确保您将文档保存为UTF-8（或至少ISO-8859-1），而不是CP1252等MS专有编码。

Answer 5

对于那些在Intranet站点设置中遇到此问题的人，如果选中“在兼容性视图中显示Intranet站点”（在很多情况下都是这样），则元标记将无法解决问题

您必须在服务器级别发送HTTP响应标头，请参阅here

Answer 6

来自服务器的CSS可能是较旧的缓存版本 - 尝试使用Ctrl + F5刷新页面，以便重新请求它。

Answer 7

对我来说，Internet Explorer的Compatibility View Settings是个问题：

复选框取消设置后，CSS完全呈现

Answer 8

我们遇到了同样的问题，修复了IE9＆amp; IE11用这个：

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

Answer 9

Juste将此添加到您的web.config文件中：

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <clear />
            <add name="X-UA-Compatible" value="IE=8" />
        </customHeaders>
  </httpProtocol>
</system.webServer>

Answer 10

我有同样的问题。我们的网络始终使用Win7和IE11。对我来说，解决方案是在我的本地机器上添加＆＃34; localhost＆＃34;到IE的兼容性设置中的列表＆gt; ＆＃34;您已添加到兼容性视图＆＃34;的网站。 IE＆gt;工具＆gt;兼容性查看设置。

BTW我们的NA让每台机器都将IE11设置为＆＃34;在兼容性视图中显示内部网站点＆＃34;由组策略自动检查。

Answer 11

我刚遇到这个问题。我改变了我的样式表和HTML代码。它在本地看起来很棒，但在服务器上不起作用。我发现在Visual Studio中，CSS文件的“复制到输出目录”设置为“不复制”。所以我的CSS更新没有得到部署。有时问题只是用户错误。

Answer 12

当“服务器”版本以某种方式缓存时，这经常发生在我身上。刷新成功了。抛弃“临时互联网文件”也是如此。

Answer 13

试试这个。

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

Answer 14

可能由缩小引起，例如在dev机器上你有

<span>AAA</span>
<span>BBB</span>

但在远程服务器上它变为

<span>AAA</span><span>BBB</span>

它们之间的空格会丢失。

CSS在Web服务器上的呈现方式与在开发环

14 个答案: