Question

我在IE 7/8/9中遇到了这个可怕的问题。

我使用Dojo toolkit 1.8.0和Play! framework编写了一个应用。除IE之外，它在所有浏览器中都能正常工作。它的'开发者工具'没有显示错误，firebug也是如此。有问题的代码部分在这里：

<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
    <div data-dojo-type="dijit.layout.ContentPane" id="head" region="top">
    </div>
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'">
        <div data-dojo-type="dijit.layout.ContentPane" id="menu" region="left">
        </div>
        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'">
            <div data-dojo-type="dijit.layout.ContentPane" id="content_1" region="top">
            </div>
            <div data-dojo-type="dijit.layout.ContentPane" id="content_2" region="bottom">
            </div>
        </div>
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" id="foot" region="bottom">
    </div>
</div>

结果，在IE以外的所有浏览器中都是这样的： good way http://s17.postimage.org/jakfmlsfz/image.jpg

但在IE中显示如下： bad way http://s17.postimage.org/wfzxspmbj/image.jpg

有谁可以解释为什么会有这样的差异？起初我认为IE内容是隐藏的，所以我设置了overflow: auto，但是在页面加载后没有出现滚动条。

Answer 1

我想到了两个可能的原因：

您没有内容容器的'center'元素 - afaik，dojo规范要求一个BorderContainerChild指定region="center"或指定非区域，默认为中心
您的标记中是否有任何非布局元素作为BorderContainer的直接子元素？在这种情况下，IE一次性更为标准要求并打破不明确的标记

Answer 2

问题在于我的自定义类已添加到.menu元素：

.menu {
    margin-right: auto;
    margin-left: auto;
}

这两种风格打破了我的整个布局 - .-当我删除它时，它开始正常显示。

Dojo的嵌套BorderContainer在IE中消失

2 个答案: