Question

有没有其他人在各种浏览器（IE，Chrome和Firefox）的开发模式下遇到风格看起来很好的问题，然后在部署网站时，风格有点偏差？

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

Development

Production

这些图片来自Google Chrome。我还要注意，我正在使用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

Answer 2

我在Chrome和FF中使用firebug（http://getfirebug.com/），然后在IE中使用IE开发工具[F12]。不幸的是，IE中的开发工具非常糟糕，但它允许您至少根据需要调整定位。

你有没有创建一个CSS重置文件来帮助“归零”？

如果您不知道css重置，请查看这些页面：

http://www.cssreset.com/

http://www.css-reset.com/

我通常使用Eric Meyer，即使它有时候感觉有点过分。在紧要关头，我使用通用复位，但这也可能有问题。阅读网站以告知您自己，并根据您的需求做出自己的决定。

Visual Studio 2013开发中的CSS样式

2 个答案: