Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

在Chrome / Firefox上，它显示如下：

1. My Title
My Details

但在IE上它显示了这一点：

1.
My Title
My Details

为了让它在IE上运行，有什么建议吗？

Answer 1

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

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

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

N.B。关于块的行为，浏览器之间存在差异 element首先放在声明为的list元素中列表样式位置：内。 Chrome和Safari都放置了这个元素与标记框位于同一行，而Firefox，Internet Explorer 和Opera把它放在下一行。有关这方面的更多信息，请参阅这个Mozilla Bug report和example。

Answer 2

阿佩克，试试这个：

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

或

ol.myList li h4 { display: inline; }

IE list-style-position：内部问题

2 个答案: