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

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标准模式.

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中看到这个非常好的.您描述的症状可以识别为MSIE中的盒子模型错误.

右键单击页面并检查HTML源.它们都完全一样吗？(包括元标记,xml声明,空格等)

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

Answer 5

对于那些在Intranet站点设置中遇到此问题的人,如果选中"在兼容性视图中显示Intranet站点"(在很多情况下),则元标记将无法解决问题

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

Answer 6

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

Answer 7

对我来说,Internet Explorer的Compatibility View Settings问题是:

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

Answer 8

我们遇到了同样的问题,修复了IE9和IE11:

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