什么会导致不同的CSS行为从一台PC到另一台?
我有一个ASP.NETMVC4应用程序,它在本地的Google Chrome和Internet Explorer中都能按预期显示 但是,一旦通过TFS部署到远程服务器上,该视图只能使用Google Chrome正确显示 与Chrome一起部署: 与IE一起部署: 如果我使用不同的工作站访问页面,我会怀疑IE兼容性按钮。但是,我总是并且只使用我自己的工作站 那么,有什么可以改变得如此巨大,以至于页面可以通过在VisualStudio中按[F5]键并简单地运行Web应用程序在本地使用IE方便地显示,并在部署CSS后使其出错 我使用:什么会导致不同的CSS行为从一台PC到另一台?,css,asp.net-mvc-4,google-chrome,internet-explorer-9,Css,Asp.net Mvc 4,Google Chrome,Internet Explorer 9,我有一个ASP.NETMVC4应用程序,它在本地的Google Chrome和Internet Explorer中都能按预期显示 但是,一旦通过TFS部署到远程服务器上,该视图只能使用Google Chrome正确显示 与Chrome一起部署: 与IE一起部署: 如果我使用不同的工作站访问页面,我会怀疑IE兼容性按钮。但是,我总是并且只使用我自己的工作站 那么,有什么可以改变得如此巨大,以至于页面可以通过在VisualStudio中按[F5]键并简单地运行Web应用程序在本地使用IE方便地显
- Internet Explorer 9
- VisualStudio2010
- 视窗7
- IIS 7.5
- 谷歌Chrome 39.0.2171.71米
- TFS 2010
html {
background-color: #e2e2e2;
margin: 0;
padding: 0;
}
body {
background-color: #fff;
border-top: solid 10px #000;
color: #000;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}
header, footer, hgroup,
nav, section {
display: block;
}
.float-left { float: left; }
.float-right { float: right; }
.clear-fix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 100%;
}
#body {
background-color: #fff;
clear: both;
padding-bottom: 35px;
}
#body a { color: #000; }
#body a:hover {
background-color: #a2998a;
color: #005596;
}
#body a:link { color: #000; }
#body a:active { color: #000; }
#body a:visited { color: #000; }
.main-content {
background: url("../Images/accent.png") no-repeat;
padding-left: 10px;
padding-top: 30px;
}
.email-counter {
display: block;
font-size: 13em;
font-family: Consolas, Arial, monospace;
font-weight: bold;
text-align: center !important;
vertical-align: middle;
}
.mailbox-title {
background-color: #fff;
border: 1px solid #000 !important;
color: #000;
font-size: 2.5em;
padding-bottom: 10px;
text-align: center;
vertical-align: middle;
}
.mailbox-title a {
color: #000;
text-decoration: none;
}
.mailbox {
border: 3px solid #000;
display: inline-block;
height: auto;
margin-top: 5px;
width: 32.66%;
}
.mailboxes-indicators { height: 400px; }
header .content-wrapper { padding-top: 20px; }
footer {
clear: both;
background-color: #e2e2e2;
font-size: .8em;
height: 100px;
}
/* site title
----------------------------------------------------------*/
.site-title {
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
line-height: 600%;
margin: 0;
text-align: center;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
.site-title .column { display: inline-block; }
.site-title #logo {
border: none;
position: absolute;
width: 25%;
}
.site-title #page-title-container {
position: relative;
width: 133%;
}
.site-title #page-title-container #page-title {
color: #000;
font-size: 4em;
font-weight: bold;
top: -15px;
}
.site-title #page-title-container #latest-refresh-date-time {
font-size: xx-large;
text-align: center;
top: -15px;
}
#sum-of-emails-from-all-mailboxes {
border: 3px solid #000;
left: -60px;
position: relative;
width: 110%;
}
#sum-display-name {
background-color: #cadaa9;
border: 1px solid #000;
color: #000;
font-size: 2.5em;
position: relative;
}
#sum-of-emails { font-size: 8em; }
DisplayIndicators.cshtml
@model IndicateursCourriels.ViewModels.CustomerServiceIndicatorsViewModel
@{
ViewBag.Title = "DisplayIndicators";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section header {
<div class="content-wrapper">
<div class="site-title">
<div class="column">
<div id="page-title-container">
<div id="page-title">
@Html.DisplayFor(m => m.ViewTitle)
</div>
<div id="latest-refresh-date-time">
@Html.DisplayFor(m => m.LatestRefreshDateTime)
</div>
</div>
</div>
<div class="column float-right">
<div id="sum-of-emails-from-all-mailboxes">
<div class="mailbox-title">
@Html.DisplayFor(m => m.SumOfEmailsFromAllMailboxesDisplayName)
</div>
<div id="sum-of-emails" class="email-counter">
@Html.DisplayFor(m => m.SumOfEmailsFromAllMailboxes)
</div>
</div>
</div>
</div>
</div>
}
<div class="mailboxes-indicators">
<div class="mailbox">
<div class="mailbox-title">
@Html.DisplayFor(m => m.FirstMailboxName)
</div>
<div class="display-label" style="text-align: center;">
<span class="email-counter"
style="background-color: @Html.DisplayFor(m => m.FirstAlertLevelColour)">
@Html.DisplayFor(m => m.FirstEmailCount)
</span>
</div>
</div>
<div class="mailbox">
<div class="mailbox-title">
@Html.DisplayFor(m => m.SecondMailboxName)
</div>
<div class="display-label">
<span class="email-counter"
style="background-color: @Html.DisplayFor(m => m.SecondAlertLevelColour)">
@Html.DisplayFor(m => m.SecondEmailCount)
</span>
</div>
</div>
<div class="mailbox">
<div class="mailbox-title">
<a href='@Url.Action("EmailIndicatorManualInput", "CustomerServiceIndicators")'>
@Html.DisplayFor(m => m.ThirdMailboxName)
</a>
</div>
<div class="display-label" style="text-align: center;">
<span class="email-counter"
style="background-color: @Html.DisplayFor(m => m.ThirdAlertLevelColour)">
@Html.DisplayFor(m => m.ThirdEmailCount)
</span>
</div>
</div>
</div>
@model indicateUrsCouriels.ViewModels.CustomerServiceIndicator视图模型
@{
ViewBag.Title=“DisplayIndicators”;
Layout=“~/Views/Shared/_Layout.cshtml”;
}
@节头{
@DisplayFor(m=>m.ViewTitle)
@DisplayFor(m=>m.LatestRefreshDateTime)
@DisplayFor(m=>m.SumOfEmailsFromAllMailboxesDisplayName)
@DisplayFor(m=>m.SumOfEmailsFromAllMailboxes)
}
@DisplayFor(m=>m.FirstMailboxName)
@DisplayFor(m=>m.FirstEmailCount)
@DisplayFor(m=>m.SecondMailboxName)
@DisplayFor(m=>m.SecondEmailCount)
@DisplayFor(m=>m.ThirdEmailCount)
编辑
根据作者的评论,本地和远程文档模式实际上是不同的
- 本地文档模式:IE9
- 远程文档模式:IE7
正如我们在上面的评论中确定的,原因是本地和远程的不同文档模式。原因可能有很多:
x-ua-compatible
头,或通过HTTP响应远程发送x-ua-compatible
meta标记检查标记(可能是
部分)是否有x-ua-compatible
元标记。如果在那里找不到,请检查那里的HTTP响应头。以上这些都不适用于我。解决方案是在IE中摆脱内联网站点的兼容性模式。在开发控制台中出现任何错误?每个人都有不同的字体渲染引擎,每个人对w3c规范都有不同的解释,诸如此类blah@MarcB不要认为这在这里很重要,威尔说它在部署之前在本地机器上的IE中工作。我会调查浏览器缓存。清空它,然后从TFS重试。还要验证缩放级别。看起来div容器溢出了,这让我觉得这可能是一个边缘大小问题。按F12键,在本地和远程检查文档模式。在本地查看时,您可能会获得不同的文档模式。在对X-UA-Compatible
元标记进行了一些研究之后,我尝试放置
,结果成功了@WillMarcouiller记住,这只是暂时的解决办法。您应该找出是什么导致站点退回到IE7文档模式,并解决该问题。<代码> X-UA兼容方法仅指创可贴,直到您能够解决根本原因。很高兴这有帮助!