代码之家 › 专栏 › 技术社区 › cozimo

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

html5-audio google-chrome

cozimo · 技术社区 · 7 年前

出于某种原因,音频元素(附在下面)显示在边缘,但不是铬。我试过添加和删除控件。下面代码中的音频元素位于最下面。我添加了其中两个只是为了看看它是否有区别,它们都显示在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>

1 回复 | 直到 7 年前

alfredfriedrich 7 年前

不幸的是,这似乎是bulma(或其底层)的一个bug 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 .

minireset.sass 或 bulma.[min].css 根据上述拉取请求的最后一次提交。