<DIV> 换行 IE11 和 Chrome/FF 之间的差异

Question

只需用 IE 11 检查 this jsfiddle，然后用 Chrome 和 FireFox

我有这个HTML

<div style="width:120px;background-color:#EE1111;">
<div class="daytext"><b>27</b></div>
<div class="dayitem">
    <div class="dayzoneon">M</div>
    <div class="dayzoneon">P</div>
    <div class="dayzoneoff">S</div>
    <div class="dayzoneon">N</div>
</div>
<div class="daytext"><b>28</b></div>
<div class="dayitem">
    <div class="nozone"></div>
</div>
<div class="daytext"><b>29</b></div>
<div class="dayitem">
    <div class="dayzoneon">M</div>
    <div class="dayzoneon">P</div>
    <div class="dayzoneoff">S</div>
    <div class="dayzoneon">N</div>
</div>
</div>

在 IE 中被正确包装，所以“29”框转到 "next line" 悬停另一个，而不是 Chrome/FF，即使“29”是 "out"容器它无论如何都放在 "same line" 上。

这是“29”

的CSS

.daytext{
position: absolute;
font-size: large;
top:10;
left: 10;
width:48px;
background-color: #333333;
border-radius:5px !important;
margin: 2px;
opacity: 0.7;
height:32px;
text-align:center;
z-index: 2;
padding-top:12px;
color: #FFFFFF;
display: inline-block;
}

我在谷歌上搜索了很长时间都没有找到答案...

另一件奇怪的事情是，如果我添加

overflow:hidden

第一个“29”框应该消失，但它仍然可见

我认为 IE11 隐式设置了一些 CSS 属性或者它有一些属性的默认值不同于 Chrome/FF

Answer 1

您的父容器具有默认位置 static，因为它不作为 包含块 并且 overflow: hidden 对您的 absolute定位元素。您可以将 position: relative 或 transform: translate3d(0,0,0); 添加到该元素，它将表现为 包含块 .

您指定 top:10; 和 left:10; 都是无效值，因为它们没有单位，因此它们的默认值 top: auto 和 left: auto 是用过的。但在那种情况下，元素本身的行为就好像它位于 static 但它不会在流中使用任何 space 因为它的位置实际上是 absolute。这就是为什么您的 29 元素不应移动到下一行（对于文本流，它没有宽度）。

所以在我看来 IE 是错误的，而 Chrome 和 FireFox 显示的结果是正确的。

老实说，我这里没有 IE，所以我无法测试自己。可能是字体 size/render 问题。如果增加容器的宽度，29 是否会留在第二行直到它完全适合第一行？

<DIV> 换行 IE11 和 Chrome/FF 之间的差异

<DIV> wrap differences between IE11 and Chrome/FF

html

css

google-chrome

firefox

internet-explorer-11