IE 和 Chrome 显示内部 div 的区别答案

【问题标题】：Difference in displaying inner div between IE and ChromeIE 和 Chrome 显示内部 div 的区别
【发布时间】：2012-10-09 12:30:26
【问题描述】：

我有一个包含“innerDIV”的“outerDIV”的代码。在 chrome 上，“innerDIV”大小为 491px，而在 IE 上为 425px（与 outerDIV 相同）。因此，在 Chrome 上，我可以看到“innerdiv”的前两个孩子：“My test string #1”和“test2”。但是对于 IE，我只能看到第一个孩子。

我不太确定“正确”的行为应该是什么，因为 Firefox 与 IE 的行为相同。但是我想让 IE 和 Chrome 一样。

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

你们能帮我想出一种方法来改变 css 以便 IE 将 div 元素内联包装吗？不过，作为一个限制，我无法更改 HTML 的宽度。作为一个好处，我正在使用一个只为 IE 加载的 CSS 来修补这些 IE 不一致。 chrome 不会加载相同的 css，所以我不必担心在更改 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>

【问题讨论】：

var len = innerDiv.childNodes.length, icnWidth = 0, i; for(i = 0; i

标签： html css internet-explorer google-chrome

【解决方案1】：

您的页面上需要一个doctype 标签，否则它将以怪癖模式呈现。

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

查看W3C recommended list of doctype declarations 以获取要使用的文档类型标记。

【讨论】：

谢谢！我尝试过使用 doctype，并确保我在浏览器模式下运行 IE：IE9 + 文档模式：IE9 标准。但是结果仍然与 Chrome 不同。

【解决方案2】：

设置.item 的宽度...容器overflow: hidden 隐藏垂直显示的项目，因为宽度超过容器的“线”可以显示。使用浮动时最好设置宽度。 DOCTYPE 设置也很重要。我个人使用loose.dtd，它具有很好的竞争力。

【讨论】：

有什么方法可以在不明确设置宽度的情况下做到这一点，就像 Chrome 一样？
你可以设置一个相对宽度，比如width:33%，但是最好设置一下。
谢谢。这种方法的问题是所有项目都有不同的宽度。我需要从javascript计算宽度，但整个想法是，css不是自下而上分配宽度，而是自行分配它们“自上而下”（即我为“outerDIV”分配宽度，而chrome分配尺寸对于“内部 div”及其所有子级）。
在我看来“空白：nowrap;”正在为 Chrome 解决问题。但是它不适用于 IE。

【解决方案3】：

我无法纯粹用 css 解决它。对于 IE，似乎解决此问题的唯一方法是让“innerDIV”元素的宽度 >= 它的子元素 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.

【讨论】：