我的HTML如下:

<div>
    <div>
        <table>
            <tbody>
            <tr>
                <td>
                    <audio src="audio1.mp3" controls="controls"></audio>
                </td>
                <td title="3b15f6c1fee191">3b15f6c1fee191</td>
                <td ></td>
                <td ></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div>
    <div>
        <table>
            <tbody>
            <tr>
                <td>
                    <audio src="audio2.mp3" controls="controls"></audio>
                </td>
                <td title="3c15f6c1fee1f1">3c15f6c1fee1f1</td>
                <td ></td>
                <td ></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div>
    <div>
        <table>
            <tbody>
            <tr>
                <td>
                    <audio src="audio3.mp3" controls="controls"></audio>
                </td>
                <td title="`">3a15f6bff18421</td>
                <td ></td>
                <td ></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
......



  如果音频标签在不同的浏览器上具有不同的高度,例如在firefox-57中显示如下:


javascript - Firefox-57:通过CSS提供高度时隐藏音频元素,但可在其他浏览器和版本上使用-LMLPHP


  为了克服这个问题,我在dom中添加了以下CSS


audio{
  height:30px
}



  但是在firefox-57中,它隐藏了音频标签,如下所示:


javascript - Firefox-57:通过CSS提供高度时隐藏音频元素,但可在其他浏览器和版本上使用-LMLPHP


  在其他浏览器中运行良好,如下所示:
  javascript - Firefox-57:通过CSS提供高度时隐藏音频元素,但可在其他浏览器和版本上使用-LMLPHP


我很困惑如何在浏览器之间实现这种无缝的高度行为。

最佳答案

FF仅在width标记上支持(正确)height <video>属性,因此,我想,对于<audio>,也无法通过CSS设置它们。

widthheight用于控制视频本身的外观,大小和比例,而不是分页。在<audio>上没有要设置的任何widthheight

其他浏览器使用它们来设置音频播放器本身的尺寸,但是无论如何,FF行为无论如何对我来说都是有意义的。

如果您的问题是正确的间距和分页元素,则最好将CSS高度应用于表格单元格……类似:

tr {
  height:30px
}


更多信息here

作为内联元素,您仍然可以尝试:

audio {
  width:20px;
  height:30px;
  display: block
}


可能会继续工作,但几乎没有高度...

关于javascript - Firefox-57:通过CSS提供高度时隐藏音频元素,但可在其他浏览器和版本上使用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47161159/

10-09 15:31
查看更多