2016-08-08 6 views
1

これは、クロムのようにきれいで小さく見え、IEでは大きくて不快です。下の2つのスクリーンショットを参照してください..任意のアイデア?第二の選択肢のようになります埋め込みオプション(クローム表示を)持っている任意のmp3ホスティングサイトはありますなぜhtml5 <audio>タグがchromeとIEで異なって表示されますか?

enter image description here IE

enter image description hereクローム

編集:私は、IE 1見た目より等を行うことができますどのようにクロームバージョン?さもなければ、クローム版に似たデザインを埋め込んだホスティングサイトを知っている人はいますか?

+1

これは単なるデフォルトバージョンですが、プラグインを使用することもできますし、自分でデザインを変更することもできます。 –

+0

IEの開発者はメトロアプリケーションの標準設定に従わなければならなかったようです。それは実際の質問ですか、それともあなたは本当にそれを変更するかを尋ねていますか? – Affe

+0

@Affe、現実的に私はそれを変える方法を尋ねています。しかし、洞察力をありがとう、感謝します。 – JarrodOliver

答えて

1

あなたはcsshtml5オーディオ/ビデオコントロールのスタイルを設定することができ、ここでの例です:

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ビデオとそのコントロールがされていますすべてが要素内に含まれており、幅と高さが最大になっています(ビデオの寸法に基づいてページ内で使用される)と中心:

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

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

SRC:

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

    ビデオが、それは正しい方法を設定されているように、容器自体はまた、いくつかのスタイリングを必要とする制御します

  1. https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics
  2. https://stackoverflow.com/a/33948255/797495
関連する問題