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”是容器的“out”，它也会放在“同一行”上“无论如何。”

这是“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是否会保留在第二行，直到它完全适合第一行？

<div>包装IE11和Chrome / FF </div>之间的差异

1 个答案: