html - 开发中的 Visual Studio 2013 CSS 样式

Question

有没有其他人遇到过这样的问题:在各种浏览器(IE、Chrome 和 Firefox)中，样式在开发模式下看起来不错，然后当您部署网站时，样式有点偏离？

我知道我的盒子和共享服务器之间的 CSS 相同。所以我不确定它可能是什么!是否有某种 CSS 工具可以帮助我对此进行调试？

这些图像来自谷歌浏览器。我还想指出，我使用的是 Visual Studio 2013 使用的 MVC 模板中的默认 bootstrap.css 文件。

HTML:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>

    <a href="../Home/" class="navbar-brand">
        <img src="~/Images/jaggedarraysLogoSmall.png" /></a>
</div>

CSS:

.navbar-brand,.navbar-nav > li > a {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.navbar-brand {
    float: left;
    padding: 10px;
    text-indent: -9999px; /* hides the link text */
    line-height: 20px;
    margin-top: 10px;
    width: 185px;
    background: url(../Images/jaggedarraysLogoSmall.png) no-repeat;
    height: 35px;
}

Answer 1

您应该使用IE10/11中的浏览器工具或其他浏览器中的等效工具检查具体显示不正确的区域。好的开发人员工具会向您展示样式的层次结构和正在应用的具体值，因此您可以查看是否有任何不同。如果值不同，来源可以为您指明正确的方向。

您还应该确保您已清除浏览器的缓存，并且托管服务提供商没有在您的页面上添加一些代码(一些免费托管服务，例如供应广告或类似内容)。

还有一种可能性——因为 ASP.NET 捆绑执行自动缩小和重新格式化你的 CSS 代码以发布代码，你的问题的根源也可能是 CSS 语法中的一些错误，浏览器可以理解，但 ASP.NET 捆绑机制读取不正确并导致错误的发布输出。使用 W3C CSS 验证器 – http://validator.w3.org/ – 并修复所有错误。

为确保缩小是原因，请尝试在生产中暂时禁用它以查看它是否有帮助 - 请参阅此处的最后一篇文章以了解实现该目的的简单方法 - ASP.NET Bundles how to disable minification