时间戳

首页 > 解决方案 >

google-chrome -

问题描述

出于某种原因，音频元素（附在下面）出现在 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>

标签： google-chromehtml5-audio

解决方案

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

bulma 中的 minireset 将 设置height为auto，这会覆盖用户代理样式表并导致0px.

CSSrevert关键字在这里应该有所帮助，但不支持（Safari 除外）：https ://caniuse.com/#feat=css-revert-value 。

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

推荐阅读