CSS: Google Chrome在中心UL元素上使用内联块做奇怪的事情
CSS: Google Chrome在中心UL元素上使用内联块做奇怪的事情
提问于 2014-06-19 10:43:19
我有一些奇怪和令人不安的事情发生在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;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2014-06-19 10:48:28
删除列表样式的位置:内部；似乎为我修复它。或者，如果您有意地需要有这个内部位置，您仍然可以将其作为显示块并使其工作：
ul, ol {
display: block;
text-align: center;
margin: 0 auto;
vertical-align: top;
}Stack Overflow用户
发布于 2014-06-19 10:52:38
在设置list-style-position: inside的地方，您还没有使元素变得更大，以说明元素中的要点。
要么删除list-style-position: inside，尽管您已经设置了这个属性，但是您可能希望保留它，因此如果您使元素比默认范围更宽，并且它将适合而不需要包装。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24304677
复制相关文章
相似问题
腾讯云开发者
