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

CSS renders differently on web server than on development environment

提问by Amanda Myer

I have this problem where the web application that I have created in my development environment, displays differently after I upload it to the web server.

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

I am using the same browser and the same machine to view the pages. The only thing different, is the "server". I am using .net 3.5 and on my development environment the pages are served using the ASP.net Development Server. On the web server, the pages are served using IIS 6.0.

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

I have only a single CSS file that is contained within the "App_Themes/Default" folder that is used to control all the CSS in my application.

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

Here are some of the things that don't display the same:

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

1) I have a collapsible panel control that when expanded is supposed to show on top of all the other page elements. On the dev environment, it behaves correctly. On the web server, the panel slides underneath the other elements.

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

2) I have my element defined with a background and a certain font size. When displayed on my development environment, the text displays on one line. However, on the web server, the text is wrapped even though the text is the same size. It's as if the containing div is somehow rendered "smaller".

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

3) The width of buttons that do not have a fixed width (so the width is determined by the button text) is different between the development environment and the web server. The bottons on the server are always wider.

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

I checked to make sure there are no references to other CSS elements in the machine.config and global web.config on the server and on my development environment.

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

I know the server is reading from the CSS because in general, it looks similar (same colors, backgrounds, font style, etc). It's just that the sizes seems to be off and the layering of the divs.

我知道服务器正在从 CSS 读取，因为一般来说，它看起来很相似（相同的颜色、背景、字体样式等）。只是尺寸似乎偏离了，div 的分层。

Has anyone run in to this problem before? Any ideas of what I could look for?

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

回答by Quentin

Looks like you are comparing them in Internet Explorer 8. Microsoft introduced different rendering modes for local and Internet servers so that web developers would break down in tears.

看起来您是在 Internet Explorer 8 中比较它们。Microsoft 为本地和 Internet 服务器引入了不同的渲染模式，因此 Web 开发人员会流泪。

If there's no X-UA-Compatible value and site is in Local Intranet security zone, it will be rendered in EmulateIE7 mode by default.

如果没有 X-UA-Compatible 值且站点在本地内网安全区域，则默认以 EmulateIE7 模式呈现。

Add X-UA-Compatible header or META to force full IE8 standards mode.

添加 X-UA-Compatible 标头或 META 以强制使用完整的 IE8 标准模式。

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

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

回答by Pablo Claus

We were having an issue with compatibility modes too, so I ended up just adding:

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

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

Since I knew it worked fine in IE7, 8, and 9.

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

回答by rostam

I had the same problem in Google Chrome. Apparently media queries get messed up if the page is zoomed in or out. Make sure your zoom level is 100% for both sites.

我在谷歌浏览器中遇到了同样的问题。显然，如果页面放大或缩小，媒体查询就会混乱。确保两个站点的缩放级别均为 100%。

回答by BalusC

This at least sounds like that the production server added a xml declaration to the HTML or changed the doctypewhich caused the page being rendered in non-standards-compliant mode. This is also known as quirks mode, you see this very good back in MSIE. The symptoms which you described are recognizeable as box model bug in MSIE.

这至少听起来像是生产服务器向 HTML 添加了 xml 声明或更改了导致页面以不符合标准的模式呈现的文档类型。这也称为 quirks 模式，您可以在 MSIE 中看到这一点。您描述的症状可以识别为MSIE 中的框模型错误。

Rightclick the pages and check the HTML source. Are they both exactlythe same? (including meta tags, xml declaration, whitespace, etc)

右键单击页面并检查 HTML 源代码。他们两个完全一样吗？（包括元标记、xml 声明、空格等）

If you're FTP'ing from Windows to Linux, please ensure that you're transferring in binary mode to ensure that the whitespace (spaces, linebreaks) remain unchanged. Also ensure that you're saving documents as UTF-8(or at least ISO-8859-1) and NOT as MS-proprietary encoding such as CP1252.

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

回答by Migs

For those of you that are having this problem in an Intranet site setting the meta tag won't fix the problem if "Display intranet sites in Compatibility View" is checked on (which it is in a lot of cases)

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

You have to send the HTTP response header at the server level, see here

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

回答by Oded

The CSS that is coming from the server may be a older cached version - try refreshing the page using Ctrl+F5 so it get re-requested.

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

回答by xameeramir

For me, Internet Explorer's Compatibility View Settingswas the issue:

对我来说，Internet ExplorerCompatibility View Settings是问题所在：

After the check-boxes were un-set, the CSS renders perfectly

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

回答by MJP

We had the same issue, fixed on IE9 & IE11 with this:

我们遇到了同样的问题，在 IE9 和 IE11 上解决了这个问题：

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

回答by Portekoi

Juste add this to your web.config file :

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

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

回答by Doreen

I had the same issue. Our network uses Win7 with IE11 throughout. For me the solution was to, on my local machine adding "localhost" to the list in IE's compatibility settings > "Websites you've added to compatibility View". IE > Tools > Compatibilty View settings.

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

BTW our NA has every machine setting IE11 to "Display intranet sites in Compatibility View" automatically checked by a group policy.

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