IE list-style-position:内部问题

Question

嗨,我list-style-position: inside在使用IE时遇到问题.在Firefox或Chrome上,它似乎没有这个问题.

ol.myList { list-style-position:inside; }
ol.myList li { padding:20px 10px; font-weight:bold }
ol.myList li p { font-weight:normal }

<ol class="myList" start="1">
    <li>
        <h4>My Title</h4>
        <p>My Details</p>
    </li>
</ol>

在Chrome/Firefox上,它显示如下:

1. My Title
My Details

但是在IE上它显示了这个:

1.
My Title
My Details

任何建议,以使其在IE上工作？

Answer 1

这是浏览器之间的不一致.Firefox在单独的行上显示数字/项目符号,IE也是如此.

使用display: inline-block上h4和*display: inline; zoom: 1;IE7的.

ol.myList li h4 {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

关于此问题的Mozilla文档引用:https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position#Browser_compatibility

注意当块元素首先放在声明为list-style-position:inside的列表元素中时,浏览器之间存在关于行为的差异.Chrome和Safari都将此元素放在与标记框相同的行上,而Firefox,Internet Explorer和Opera将它放在下一行.有关此内容的更多信息,请参阅此Mozilla Bug报告和示例.