2

我有这个代码，它有一个包含“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>
4

3 回答 3

3

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

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

查看W3C 推荐的 doctype 声明列表，以便使用 doctype 标签。

于 2012-10-18T22:59:35.583 回答
0

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

于 2012-10-18T23:04:00.997 回答
0

我无法纯粹用 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.
于 2012-11-01T15:46:11.347 回答