在IE和Chrome之间显示内部div的差异

我的代码具有一个" ofertdiv"，其中包含一个" innindiv"。在Chrome上，" InnerDiv"的大小为491px，而在IE上为425px（与OuterDiv相同）。因此，在Chrome上，我可以看到" Innerdiv"的前两个孩子："我的Test String＃1"one_answers" Test2"。但是对于IE，我只能看到第一个孩子。

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

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

你们能帮我找出一种更改CSS的方法，以便将DIV元素内联包裹起来吗？但是，作为限制，我无法更改HTML的宽度。为了好处，我正在使用仅加载IE来修补此类IE不一致之处的CSS。相同的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>

您在页面上需要一个doctype标签，否则将在怪异模式下渲染。

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

查看W3C建议使用的Doctype声明列表。

设置.item ...容器overflow: hidden的宽度隐藏了垂直显示的项目，因为宽度不仅仅是容器的"线"可以显示。使用浮动时，可以使用宽度集。Doctype也很重要。我的个人使用loose.dtd，具有良好的竞争力。

我无法完全用CSS解决它。对于IE来说，解决此操作的唯一方法是拥有" InnerDiv"元素的宽度> =其子女的总和偏移宽度。因此，我只是将其添加到我的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.

相关内容

最新更新

热门标签：