删除 <div><ul><li></li><li></li></ul></div> 标签底部多余的空格

Question

<link rel="stylesheet" 
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
      crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
        integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
        crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
        crossorigin="anonymous">
</script>

h3 {
  font-size: 22px;
  line-height: 28px;
}

ul {
  line-height: 22px;
  padding-bottom: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
        integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!------- START :: SYSTEM REQUIREMENTS --------->
<div class="row">
  <div class="col">
    <div class="card toggle-card">
      <div class="card-header" data-toggle="collapse" href="#SYSTEMREQUIREMENTS" role="button">
        <h3 class="toggle-card-closed">The minimum system requirements are:</h3>
      </div>
      <div class="collapse" id="SYSTEMREQUIREMENTS">
        <div class="card-body">
          <p>p_1</p>
          <ul>
            <li>li_1</li>
          </ul>

          <p>p_2</p>
          <ul>
            <li>li_1</li>
            <li>li_2</li>
            <li><strong>li_3</strong></li>
          </ul>

          <p>p_3</p>
          <ul>
            <li>li_1</li>
            <li>li_2</li>
            <li>li_3</li>
          </ul>

          <p>p_4</p>
          <ul>
            <li>li_1</li>
          </ul>

          <p>p_5</p>
          <p><strong><u>p_6</u></strong></p>
          <p>p_7</p>

          <p>p_8</p>
          <ul>
            <li>li_1</li>
            <li>li_2</li>
          </ul>
          <p><a href="#top">Back to top</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

以上是我的确切代码块，带有替换文本。这是它的样子：

它应该是这样的：

底部的这个“额外”空白在每个带有多个li 的ul 标记中累积。如果只有一个li，则空格不会累积。

我有多个div class="row" div class="col" div class="card toggle-card" 部分，而这个部分是唯一一个有额外空白的部分。这绝对是由于ul 标签中有多个li，因为我已经退出并调试到最低限度。

免责声明：这似乎只是一个 IE 问题；用IE11测试。我在 Edge、Chrome 和 Firefox 中尝试过零问题。

Answer 1

我不完全确定您的问题是什么（或者空白在哪里，我看不到它），但我已经解决了许多像您这样的问题，方法是将 class="mb-0" 添加到任何有问题的元素中。这在<p> 标签上尤其常见（对我来说）。

更新：我的第一个答案仍然有效。将<li> 更改为<li class="mb-0">。

h3 {
  font-size: 22px;
  line-height: 28px;
}

ul {
  line-height: 22px;
  padding-bottom: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
        integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!------- START :: SYSTEM REQUIREMENTS --------->
<div class="row">
  <div class="col">
    <div class="card toggle-card">
      <div class="card-header" data-toggle="collapse" href="#SYSTEMREQUIREMENTS" role="button">
        <h3 class="toggle-card-closed">The minimum system requirements are:</h3>
      </div>
      <div class="collapse" id="SYSTEMREQUIREMENTS">
        <div class="card-body">
          <p>p_1</p>
          <ul>
            <li>li_1</li>
          </ul>

          <p>p_2</p>
          <ul>
            <li>li_1</li>
            <li>li_2</li>
            <li><strong>li_3</strong></li>
          </ul>

          <p>p_3</p>
          <ul>
            <li>li_1</li>
            <li>li_2</li>
            <li>li_3</li>
          </ul>

          <p>p_4</p>
          <ul>
            <li>li_1</li>
          </ul>

          <p>p_5</p>
          <p><strong><u>p_6</u></strong></p>
          <p>p_7</p>

          <p>p_8</p>
          <ul>
            <li>li_1</li>
            <li>li_2</li>
          </ul>
          <p class="mb-0"><a href="#top" class="mb-0">Back to top</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

更新以实际解决问题