从Web服务器运行应用程序与从本地开发服务器运行应用程序时DIV布局不同。

Question

从Web服务器运行应用程序与从本地开发服务器运行应用程序时DIV布局不同。

csshtml

5

我有一个CSS问题。当我从Web服务器运行我的Web应用程序和在本地VS2010开发服务器上运行时，我的DIVs的布局是不同的。

当我在本地运行时，我的三个内部DIV（preButtons，navContainer，postButtons）都以行内方式显示，但当我从IIS 7.5 Web服务器发布并运行时，每个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开发者工具中，蓝色边框是因为我选择了“pager”div。 enter image description here

更新：

最终，我的问题有两个方面。

我的HTML和CSS需要进行清理，正如所示，但是我的网站也以兼容模式打开。这是因为在“工具”-->“兼容性视图设置”下，“显示Intranet站点的兼容性视图”选项被选中。我想这是当我们公司将IE8部署到我们的台式机时自动设置的。

感谢大家的帮助！

- Ben Finkel

1

那种事情通常不会发生。它一定是为您提供了该页面的缓存版本。 - Anirudh Ramanathan

@Laurence - 你知道吗？它确实有用。.buttons a被设置为display:block;删除这行代码并没有改变任何东西。 - Ben Finkel

1

在IE开发者工具中，两个页面的页面模式是否相同（即在这两种情况下它们都以IE7或8或9模式呈现 - 只要它们是相同的就可以）？ - robertc

@robertc - 那很可能就是了。似乎我可以通过在兼容模式和IE8之间切换来重现这个问题。 - Ben Finkel

我的选项中设置了“在兼容性视图中显示Intranet站点”。这一定是IE8部署到我们的桌面电脑时的一部分。 - Ben Finkel

显示剩余9条评论

2个回答

0

在你的CSS开始时使用诸如this one这样的CSS重置。

- Alexcp

不幸的是，這是一個部分視圖控制，並作為我的應用程序中其他頁面的一部分嵌入。清除CSS會破壞我頁面上的其餘內容。我試了試，但div仍然有斷行的問題。 - Ben Finkel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bpeterson76 · Accepted Answer

你可以在这里大大简化你的代码。将你的三个div放入一个容器中。左浮动所有三个div，然后清除浮动即可。不再需要绝对定位。完成了。

例如： 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;
}

作为一种补充，根据你所分页的内容，使用JavaScript网格（例如DataTables）可能会更容易，这将消除所有这些操作的需要...