CSS：谷歌Chrome在集中的UL元素上使用内联块做奇怪的事情

Question

我在Chrome上发生了一些令人不安和令人不安的事情，其中​​UL元素设置为display:inline-block;

在我的屏幕上，它似乎每次都显示得非常好：

但是我的同事Chrome浏览器（相同版本）：

令人不安的是，如果他调出开发者控制台并简单地关闭display:inline-block;，那就有效了！

这是我的实例 - http://jsfiddle.net/Bsm4t/

任何人都知道究竟是什么导致它，或者我怎么可能调试它甚至修复它？

哦，如果链接停止工作，这里有一些代码片段：

HTML：

<div>
<p>Pulse will enable you to manage your mobile assets in a way that no other solution on the market currently offers. Pulse comprises of the following 3 modules:</p>
<ul>
    <li><a href="/product-portfolio/enterprise-mobility/pulse/live-planning-and-execution.html"><strong>Live Planning and Execution</strong></a></li>
</ul>
<p>Manage resources in real-time using detailed maps and user friendly applications</p>

<ul>
    <li><a href="/product-portfolio/enterprise-mobility/pulse/mobility-pulse-mobile.html"><strong>Mobility – Pulse Mobile</strong></a></li>
</ul>
</div>

CSS：

@import url(http://fonts.googleapis.com/css?family=Patua+One|Fjord+One|Imprima|Reenie+Beanie);

div {
    width:80%;
    text-align:center;
    font-size: 62.5%;
    font-family: "Imprima", "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
}
* {
    -webkit-backface-visibility: hidden;
}
ul, ol {
    display: inline-block;
    text-align: left;
    vertical-align: top;
}
ul li,
ol li {
    margin:0 0 5px 0;   
    list-style-position:inside;
}
ul ul,
ul ol,
ol ol,
ol ul {
   padding:0;
   margin:30px 0 0 0; 
}

Answer 1

删除list-style-position：inside;似乎为我解决了这个问题。或者如果您故意需要具有内部位置，您仍然可以将其作为显示块并使其工作：

ul, ol {
    display: block;
    text-align: center;
    margin: 0 auto;
    vertical-align: top;
}

Answer 2

如果您设置了list-style-position: inside，那么您还没有将元素设置得更大，以便考虑元素中的项目符号点。

要么删除list-style-position: inside，尽管您已经设置了此属性，但如果您将元素设置为比默认值更宽并且它不适合包装，则可能需要保留它。