css - 当我从网络服务器而不是本地开发服务器运行应用程序时，DIV 布局不同

Question

我遇到了 CSS 问题。我的 DIV 布局不同，具体取决于我何时从 Web 服务器运行我的 Web 应用程序与我的本地 VS2010 开发服务器。

当我在本地运行时，我的三个内部 DIV(preButtons、navContainer、postButtons)都以内联方式显示，但是当我从 IIS 7.5 网络服务器发布和运行时，每个 div 之后都有一个换行符。

知道我错过了什么吗？

这是 HTML:

<style type="text/css">    
    div#pager div
    {
        display: inline-block;
    }

    #navContainer
    {
        width: 340px;
        height: 28px;                
        overflow: hidden;   
        position: relative;     
    }

    #reel
    {
        position: absolute;
        top: 0;
        left: 0;      
        width: 0;  
    }

</style>
<div id="pager" class="buttons">
    <div id="preButtons"></div>
    <div id="navContainer">
        <div id="reel">
        </div>
    </div>
    <div id="postButtons"></div>
</div>

更新:

这是实际问题的屏幕截图。蓝色边框是因为我在 IE 开发人员工具中选择了“寻呼机”div。

更新:

归根结底，我的问题有两个方面。

我的 HTML 和 CSS 需要按照指示进行清理，而且我的网站以兼容模式打开。这是因为“在兼容性 View 中显示 Intranet 站点”选项在工具 --> 兼容性 View 设置下被选中。我认为是在我的公司将 IE8 部署到我们的桌面时自动设置的。

感谢大家的帮助!

Answer 1

您可以在此处大大简化您的代码。把你的三个 div 放在一个容器里。漂浮所有三个离开。之后清除 float 。不再需要绝对定位。完成交易。

例如: HTML:

<div class="container">
       <div class="floatleft"></div>
       <div class="floatleft"></div>
       <div class="floatleft"></div>
       <div class="clear"></div>
</div>

CSS:

.floatleft {
  float: left;
}

.clear {
  clear:both;
}

顺便说一句，根据您要分页的内容，使用 DataTables 这样的 javascript 网格可能要容易得多。这将完全不需要做任何这些......