列表项目符号在 Mozilla 和 IE 中的间距比 Chrome

Question

下面是我的HTML:

<div id="text_style">
<div id="text_style_in">
<ul>
    <li>
    <p><a href="#" target="_self">Fact Sheet</a></p>
    </li>
    <li>
    <p><a href="#" target="_self">Facilities and Administrative (F&amp;A) Cost Agreements</a></p>
    </li>
    <li>
    <p><a href="#" target="_self">PropStart</a></p>
    </li>
    <li>
    <p><a href="#" target="_self">Equipment Matching</a></p>
    </li>
    <li>
    <p><a href="#" target="_self">Training Guide: Preparing Research Proposal Budgets</a></p>
    </li>
    <li>
    <p><a href="#" target="_self">Three Work-Day Rule</a></p>
    </li>
</ul>
</div>
</div>

我没有唯一定义的列表样式。如何使列表在 Mozilla 和 IE 中看起来相似？

Answer 1

你应该删除 de <p> 标签，并把它改成这样：

<ul>
  <li><a href="#" target="_self">one</a></li>
  <li><a href="#" target="_self">two</a></li>
</ul>

Answer 2

你有一个 <p> 元素嵌套在你的 html 中的每个 <li> 元素中。

你必须写成：

<ul>
<li><a href="#" target="_self">Fact Sheet</a></li>
<li><a href="#" target="_self">Facilities and Administrative (F&A) Cost Agreements</a></li>
<li><a href="#" target="_self">PropStart</a></li>
<li><a href="#" target="_self">Equipment Matching</a></li>
<li><a href="#" target="_self">Training Guide: Preparing Research Proposal Budgets</a></li>
<li><a href="#" target="_self">Three Work-Day Rule</a></li>
</ul>

但是如果你只想保留 <p> 元素。使它们成为内联块：ul li p {display: inline-block} 并且行不应中断...

列表项目符号在 Mozilla 和 IE 中的间距比 Chrome

List bullets have more spacing in Mozilla and IE than in Chrome

html

css

internet-explorer

mozilla

google-chrome