css - 为什么 html5 标签在 chrome 和 IE 上显示不同？

Question

它在 chrome 中看起来干净而小，而在 IE 中又大又令人讨厌。请参阅下面的两个屏幕截图。有什么想法吗？是否有任何 mp3 托管网站的嵌入选项看起来像第二个选项(chrome 显示)

浏览器

Chrome

编辑:如何使 IE 看​​起来更像 chrome 版本？否则，有没有人知道任何具有类似于 chrome 版本的嵌入设计的托管网站？

Answer 1

您可以使用 css 为 html5 音频/视频控件设置样式，这是一个示例:

HTML 标记

<div id="video-controls" class="controls" data-state="hidden">
   <button id="playpause" type="button" data-state="play">Play/Pause</button>
   <button id="stop" type="button" data-state="stop">Stop</button>
   <div class="progress">
      <progress id="progress" value="0" min="0">
         <span id="progress-bar"></span>
      </progress>
   </div>
   <button id="mute" type="button" data-state="mute">Mute/Unmute</button>
   <button id="volinc" type="button" data-state="volup">Vol+</button>
   <button id="voldec" type="button" data-state="voldown">Vol-</button>
   <button id="fs" type="button" data-state="go-fullscreen">Fullscreen</button>
</div>

基本样式

HTML 视频及其控件都包含在一个元素中，该元素具有最大宽度和高度(基于所用视频的尺寸)并在页面中居中:

figure {
   max-width:64rem;
   width:100%;
   max-height:30.875rem;
   height:100%;
   margin:1.25rem auto;
   padding:1.051%;
   background-color:#666;
}

视频控件容器本身也需要一些样式，以便以正确的方式设置它:

.controls {
   width:100%;
   height:8.0971659919028340080971659919028%; /* of figure's height */
   position:relative;
}

audio {
    background-color: #95B9C7;
    /*etc...*/
}

---

源代码:

1. https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics
2. https://stackoverflow.com/a/33948255/797495