Internet Explorer ol数字显示在li的底部,而不是按预期显示在顶部

恭喜,您是IE的hasLayout属性的受害者.

简短版本:这次你很容易.更改这些规则:

...

ol {
    font-size: 1.1em;
}

...

li.main_item {
    width: 700px;
    clear: right;
}

...

对此:

...

ol {
    font-size: 1.1em;
    width: 700px;
}

...

li.main_item {
    clear: right;
}

...

这一切都很好.

更长版本:当您将某些CSS规则应用于某些元素时,IE 5.5+会为这些元素提供一个名为"hasLayout"的属性,该属性会更改该元素的呈现方式.由于hasLayout是一个没有明显目的的只读属性,因此在网页设计师遇到这个问题之前花了很长时间.较旧的网站(甚至Quirksmode.org!)仍然有页面建议填充填充,边距,甚至使用Javascript来解决这些问题.如果你可以帮助它,不要做这些事情.相反,看看你是否可以找出错误地给出hasLayout的元素,并更改有问题的CSS,使元素不再获得hasLayout.如果这完全打开了您的页面,请使用条件注释修复它只是为了IE.以下是一些CSS规则,它们将"hasLayout"添加到尚未拥有它的元素中:

位置:绝对

float:left | right

display:内联块

高度:除'auto'以外的任何值

zoom:除'normal'以外的任何值(MS专有)

写模式:tb-rl(MS专有)

从IE7开始,溢出成为hasLayout的触发器.

溢出:隐藏|滚动|自动

最长版本:阅读以下文章.

这是微软希望你通过触发"hasLayout"来做的所有巧妙的事情.

这是网页设计师在发现正在发生的事情时所考虑的清晰语言版本.一些相同的内容,但包括CSS黑客和东西.