Question

由于某些原因，音频元素（如下所示）显示在Edge中，但未显示在Chrome中。我尝试添加和删除控件。下面代码中的音频元素位于最底部。我添加了两个，只是为了看看是否有所不同，它们都显示在Edge中，而不显示在Chrome中。我只是想不通。我的Chrome浏览器是70.0.3538.77版。感谢您阅读本文！

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello Bulma!</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  <link rel="stylesheet" href="./helper.css">
</head>

<body>

  <section class="hero is-primary">
    <!-- Hero head: will stick at the top -->
    <div class="hero-head">
      <header class="navbar">
        <div class="container">
          <div class="navbar-brand">
            <a class="navbar-item">
              <span class="title">NAVARO</span>
            </a>
          </div>
          <div id="navbarMenuHeroC" class="navbar-menu">
            <div class="navbar-end">
              <a class="navbar-item">
                Home
              </a>
              <a class="navbar-item">
                Albums
              </a>
              <a class="navbar-item">
                Concerts
              </a>
              <span class="navbar-item">
                <a class="button is-primary is-inverted">
                  <span class="icon">
                    <i class="fas fa-headphones-alt"></i>
                  </span>
              <span>Listen</span>
              </a>
              </span>
            </div>
          </div>
        </div>
      </header>
    </div>

    <!-- Hero content: will be in the middle -->
    <div class="hero-body">
      <div class="container has-text-centered">

        <!--Album-->
        <div class="center-column">
          <figure class="image is-128x128">
            <img src="./album_cover.jpg">
          </figure>
          <h2 class="title">
            Arctic Gibbons
          </h2>
          <h2 class="subtitle">
            NAVARO // Ft. Eric Clapton
            <br />
            <span>03.11.2018</span>
          </h2>
          <a class="button is-primary is-inverted">
            <span class="icon">
              <i class="fas fa-headphones-alt"></i>
            </span>
            <span>Listen</span>
          </a>
        </div>

        <!--Song Table-->
        <div class="container center-column" style="padding:25px">
          <table class="table">
            <thead>
              <tr>
                <th>Track</th>
                <th>Song</th>
                <th>Length</th>
                <th>Listen</th>
                <th>Buy</th>
              </tr>
            </thead>

            <tbody>
              <!-- Track 1 -->
              <tr>
                <th>1</th>
                <td>The View from the Afternoon</td>
                <td>3:19</td>
                <td>
                  <a class="button is-primary">
                    <span class="icon">
                      <i class="fas fa-headphones-alt"></i>
                    </span>

                  </a>
                </td>
                <td>
                  <a class="button is-primary">
                    <span class="icon">
                      <i class="fas fa-shopping-cart"></i>
                    </span>
                    <span>Buy</span>
                  </a>
                </td>
              </tr>

              <!-- Track 2 -->
              <tr>
                <th>2</th>
                <td>I Bet You Look Good on the Dancefloor</td>
                <td>2:53</td>
                <td>
                  <a class="button is-primary">
                    <span class="icon">
                      <i class="fas fa-headphones-alt"></i>
                    </span>
                  </a>
                </td>
                <td>
                  <a class="button is-primary">
                    <span class="icon">
                      <i class="fas fa-shopping-cart"></i>
                    </span>
                    <span>Buy</span>
                  </a>
                </td>
              </tr>

              <!-- Track 3 -->
              <tr>
                <th>3</th>
                <td>Fake Tales of San Francisco</td>
                <td>2:57</td>
                <td>
                  <a class="button is-primary">
                    <span class="icon">
                      <i class="fas fa-headphones-alt"></i>
                    </span>
                  </a>
                </td>
                <td>
                  <a class="button is-primary">
                    <span class="icon">
                      <i class="fas fa-shopping-cart"></i>
                    </span>
                    <span>Buy</span>
                  </a>
                </td>
              </tr>

            </tbody>
          </table>
        </div>

        <div class="container center-column">
          <audio src="https://www.bensound.org/bensound-music/bensound-dubstep.mp3" controls></audio>
          <p>the audio should exist above and below this element</p>
          <audio controls>
            <source src="https://www.bensound.org/bensound-music/bensound-dubstep.mp3" type="audio/mpeg">
          </audio>

        </div>

      </div>
    </div>

  </section>

</body>

</html>

Answer 1

不幸的是，这似乎是bulma（或底层minireset.css）的错误： https://github.com/jgthms/bulma/issues/2060。对此还有一个待处理的提取请求：https://github.com/jgthms/minireset.css/pull/15。

bulma中的minireset将height设置为auto，这将覆盖用户代理样式表并产生0px。

CSS revert关键字应该可以在此处提供帮助，但不支持（Safari中除外）：https://caniuse.com/#feat=css-revert-value。

如果您希望/可以修改项目中的bulma源，则可以根据提到的拉取请求的最后一次提交来“修补” minireset.sass或bulma.[min].css。

<audio> HTML5在Chrome中不起作用，但在Edge中起作用

1 个答案: