在不同浏览器中给出不同外观的列表样式

我无法弄清楚为什么我的'列表样式：光盘'在不同浏览器中给出不同的外观。请参阅http://www.galadadatingandrelating.com/水色下的“联系我们”区域，有3L元素。 -在不同浏览器中给出不同外观的列表样式

If you want to join us sailing as an individual or a couple, at any time, contact us here. 

If you have a dating and relating question/dilemma feel free to send it here. We may reply to you personally or we may cover it in a blog. 

If you have a question on any of the services, packages, next sailing and exotic islands trips – feel free to ask us here.

现在他们在Firefox之前显示光盘，但在Chrome中，光盘完全位于左侧。

为什么Chrome浏览器显示不正确？

来源

2016-04-10 yogihosting

你的CSS中的东西正在改变两个浏览器之间的列表样式位置。两者在本地进行相同的定位。无法确切知道改变你的是什么。 – Rob

是的，我已经注意到，在Chrome浏览器中，li变成了全宽。无法弄清楚它们是如何变成全宽的。这在Firefox中并非如此。有什么建议么。 – yogihosting

添加list-style-position: inside;到<li>元素：

.line-wrap ul li { 
    list-style-position: inside; 
}

列表例子在行动中看到的问题和解决方案：

ul#one, ul#two { 
 
    text-align:center; 
 
} 
 
ul#two { 
 
    list-style-position: inside; 
 
}

<ul id="one"> 
 
    <li>List</li> 
 
    <li>Number</li> 
 
    <li>One</li> 
 
</ul> 
 
<ul id="two"> 
 
    <li>List</li> 
 
    <li>Number</li> 
 
    <li>Two</li> 
 
</ul>

来自关于inside的规范：
标记框被放置在主体块框中的第一个内联框中，在元素的内容之前以及之前：任何伪元素之前。 CSS 2.1没有指定标记框的精确位置。
https://www.w3.org/TR/CSS2/generate.html#propdef-list-style-position

说明：
在谷歌Chrome list-style-position的默认值是outside：
在Mozilla Firefox也是如此，看来火狐解释这个规则有点不同！

来源

2016-04-10 14:02:43

感谢它解决了我的问题，但究竟是什么属性内？ – yogihosting

在不同浏览器中给出不同外观的列表样式

回答

相关问题