Question

我有这个代码有一个“outerDIV”，其中包含“innerDIV”。在chrome上，“innerDIV”大小为491px，而在IE上则为425px（与outerDIV相同）。因此，在Chrome上我可以看到“innerdiv”的前两个孩子：“我的测试字符串＃1”和“test2”。但对于IE我只能看到第一个孩子。

我不太确定“正确”行为应该是什么，因为firefox和IE一样。不过我想让IE和Chrome一样。

我一直在尝试一些css样式（主要是溢出和显示），但仍然无法做到正确：IE将扩展其高度而不是宽度，以使元素适合。

你们可以帮我找出改变css的方法，以便IE将div元素内联包装吗？但作为限制，我无法更改HTML上的宽度。作为一个好处，我使用的是仅加载IE的CSS来修补这些IE的不一致性。同样的css不会加载chrome，所以我不需要担心在更改IE CSS时搞乱chrome。提前谢谢！

<html>
    <head>
    <style type="text/css">

        <!--

            body {
                font-family: helvetica;
            }


            .myContainer {
                overflow: hidden;
                border: 1px solid rgba(0, 0, 0, .5);
                font-size: 14pt;
                height: 49px;
                line-height: 49px;
                overflow: hidden;
                display: block;
            }

            .myContainer > DIV {
                float: left;
                white-space: nowrap;
                display: block;
            }

            .myContainer .item:first-child {
                padding-left: 10px;
            }

            .myContainer .item {
                float: left;
                padding-right: 32px;
            }

        -->

    </style>

    </head>

        <body>

            <div id="outerDIV" class="myContainer" style="display: block; width: 425px;">
                <div id="innerDIV">
                    <div class="item">
                        --------My test string #1--------
                    </div>
                    <div class="item">
                        ------test2-------
                    </div>
                    <div class="item">
                        test
                    </div>
                </div>
            </div>


        </body>
</html>

Answer 1

您的网页上需要doctype标记，否则会以怪癖模式呈现。

这意味着浏览器与浏览器完全不同，但基本上它试图与非常旧的浏览器兼容。在IE中，它会触发non-standard box model，这可以解释大小的差异。

查看W3C recommended list of doctype declarations以查找要使用的doctype标记。

Answer 2

设置.item的宽度...容器overflow: hidden隐藏了垂直显示的项目，因为宽度超过了容器可以显示的“行”。使用浮动时最好设置宽度。 DOCTYPE也非常重要。我个人使用loose.dtd，这提供了良好的竞争力。

Answer 3

我无法用css完全解决它。对于IE来说，似乎解决这个问题的唯一方法就是让“innerDIV”元素的宽度为＆gt; =它的子节点offsetWidth的总和。所以我把它添加到我的JS代码中（IE的特例）：

var len = innerDiv.childNodes.length,
          innerDivWidth = 0,
          i;

 for(i = 0; i < len; i++){
    innerDiv += innerDiv.childNodes[i].offsetWidth;                                             
 }

 innerDiv.style.width = (innerDiv + 1) + 'px';  //Safety measure to make up for the decimal places. I guess we could write this line in a better way by rounding up, etc.

在IE和Chrome之间显示内部div的区别

3 个答案: