<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”框转到“下一行”悬停另一个，而不是在 Chrome/FF 中，即使“29”在容器“外”，它也会放在“相同”上行”。

这是“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;
}

我google了这么久也没找到答案……

另外一个奇怪的是，如果我加了

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，但它不会使用流中的任何空间，因为它的位置实际上是absolute。这就是为什么您的 29 元素不应移动到下一行（对于文本流，它没有宽度）。

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

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