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

我遇到此问题，即我在开发环境中创建的Web应用程序在将其上载到Web服务器后显示不同。CSS在Web服务器上的呈现方式与在开发环境中的呈现方式不同

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

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

下面是一些不显示相同的事情：

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

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

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

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

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

有没有人遇到过这个问题？任何想法，我可以寻找什么？

来源

2009-12-08 Amanda Myer

确保在所有输出的HTML文件的标题中正确设置字符编码，并正确声明。确保你保存了正确的编码格式的文件。 – Breakthrough 2009-12-08 14:42:22

我要检查的第一件事是浏览器缓存，如果你的CSS最近正在经历许多修改。你也可以使用Firefox的Firebug来检查每个DOM元素应用了哪些CSS。一个Web位置，用于演示您的Web服务器向您展示的内容，或者如果可能，某些CSS代码可能会帮助您查看更深层次的内容。 – 2009-12-08 14:44:21

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

右键单击页面并检查HTML源代码。他们都是究竟与一样吗？（包括元标记，xml声明，空格等）

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

来源

2009-12-08 14:41:30 BalusC

我正在使用DIFF工具查看HTML源代码，它们绝对不一样。但是，DOC类型是相同的。有没有其他的区别会成为红旗？ – 2009-12-08 14:48:56

doctype声明之前的空白不正确也会触发怪异模式下的MSIE。这可以是任何不是'\ s'，'\ t'，'\ r'或'\ n'的字符，例如'\ u00a0'。 – BalusC 2009-12-08 14:54:49

美好的一天。我一直有类似的问题，请参阅我的线程：[一]（http://stackoverflow.com/questions/39711761/why-rdlc-report-renders-differently-in-different-environments/39729635#39729635），[和两个]（http://stackoverflow.com/questions/39732671/what-causes-an-override-of-http-equiv-x-ua-compatible-content-ie-edge-chrome）。我已经比较了两个源文件，它们在元标记，xml声明和空白方面是相同的。我将如何继续下一步？ – 2016-09-27 22:52:04

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

来源

2009-12-08 14:48:10 Oded

我想你的意思是Ctrl-F5 – Kzqai 2009-12-08 14:55:28

谢谢 - 现在修好了。 – Oded 2009-12-08 17:03:00

谢谢！这个问题在过去3天发生在我身上，不知道该怎么做。我知道，这是一个老问题，但是你能解释一下，是什么使得它与F5或Ctrl F5的刷新浏览器不同？ – RubahMalam 2016-06-18 02:53:33

-1

当'服务器'版本以某种方式被缓存时，这经常发生在我身上。刷新做了诀窍。扔掉'临时互联网文件'也是如此。

来源

2009-12-08 14:48:13 xtofl

看起来像是在Internet Explorer 8中比较它们。微软为本地和互联网服务器引入了不同的呈现模式，这样Web开发人员就会泪流满面。

如果没有X-UA兼容的价值和网站在本地Intranet安全区域，它将在EmulateIE7模式默认渲染。

添加X-UA兼容头或META强制全IE8标准模式。

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

来源

2009-12-08 15:23:05 Quentin

谢谢。哦亲爱的上帝，这解决了这么多问题 – DFTR 2011-09-29 19:17:56

+11

我不明白为什么这存在，但幸好我在自杀前发现它。 – 2011-12-13 18:17:08

+20

“微软为本地和互联网服务器引入了不同的渲染模式，这样网络开发人员就会泪流满面。” - 当我读到这些时，我正在大哭大笑。如此真实，但很伤心！ – 2012-02-15 13:05:58

请参见那些你在一个内部网站有这个问题设置了元标记不会解决问题，如果“兼容性视图中显示Intranet站点”是在检查（这是在很多情况下）

你必须发送在服务器级别的HTTP响应头，看到here

来源

2011-02-28 20:40:24 Migs

非常感谢。我一整天都在摔跤！ – Wilky 2013-08-28 16:36:44

我们具有兼容模式的问题太多，所以我最终只是增加：

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

因为我知道它在IE7,8和9中工作正常。

来源

2012-10-24 12:51:19

非常感谢，你救了我的一天:) – 2016-03-20 07:26:56

这帮了一大堆，非常感谢你！我的网页是完美的Firefox和Chrome然后你打开IE浏览器和你的OMG !!!!!添加了这个，它修复了一切！感谢您的文章！ ps-我从不评论伟大的工作！ – 2016-05-27 19:22:57

@DavidBrierton很高兴为您效劳！ IE是一种有点痛苦，不是吗？ – 2016-06-12 22:40:50

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

来源

2013-01-14 18:47:13

中庸之道添加到您的web.config文件：

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

来源

2013-04-12 13:51:03 Portekoi

我们有同样的问题，固定在IE9 & IE11与此：

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

来源

2014-08-27 05:49:28 MJP

-2

试试这个，。

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

来源

2014-10-19 15:47:21

我在Google Chrome中遇到同样的问题。显然，如果页面放大或缩小，媒体查询会变得混乱。确保两个网站的缩放比例均为100％。

来源

2015-04-24 23:37:42 rostam

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

的复选框后，未设置，CSS的渲染完美

来源

2016-05-26 06:08:48 xameeramir

我爱你。我准备扔我的电脑和我的项目，然后我自己走出了窗口 – KentGeek 2017-11-28 09:18:49

@KentGeek我很高兴我可以帮助你:) – xameeramir 2017-11-29 11:24:24

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

顺便说一句，我们的NA让每台机器都将IE11设置为“通过组策略自动检查”在“兼容性视图中显示Intranet站点”。

来源

2016-09-21 18:26:32 Doreen

-2

可能是由缩小造成的，例如， dev的机器你有

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

但远程服务器上变得

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

和它们之间的空间会丢失。

来源

2016-11-17 21:50:18

我有这个完全相同的问题，不知道为什么许多副本的同一解决方案upvoted和这是其中一个不同的少数有-2 .... – 2018-01-17 15:49:56

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

回答

相关问题