我的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中显示如下:
为了克服这个问题,我在dom中添加了以下CSS
audio{
height:30px
}
但是在firefox-57中,它隐藏了音频标签,如下所示:
在其他浏览器中运行良好,如下所示:
我很困惑如何在浏览器之间实现这种无缝的高度行为。
最佳答案
FF仅在width
标记上支持(正确)height
<video>
属性,因此,我想,对于<audio>
,也无法通过CSS设置它们。width
和height
用于控制视频本身的外观,大小和比例,而不是分页。在<audio>
上没有要设置的任何width
或height
。
其他浏览器使用它们来设置音频播放器本身的尺寸,但是无论如何,FF行为无论如何对我来说都是有意义的。
如果您的问题是正确的间距和分页元素,则最好将CSS高度应用于表格单元格……类似:
tr {
height:30px
}
更多信息here
作为内联元素,您仍然可以尝试:
audio {
width:20px;
height:30px;
display: block
}
可能会继续工作,但几乎没有高度...
关于javascript - Firefox-57:通过CSS提供高度时隐藏音频元素,但可在其他浏览器和版本上使用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47161159/