css - 更改不同浏览器的媒体播放器对象宽度

Question

我在 asp.net web 应用程序上有一个媒体播放器对象。 Chrome 和 firefox 显示为 vlc player，IE 显示为 microsoft windows media player。

这使得嵌入式音频播放器对象的宽度不同。我想使用 css 为不同的浏览器调整不同的媒体播放器宽度。我应该为它做什么？

音频播放器代码:

<div CssClass="media_player">
            <object name="MMPlayer1" id="MMPlayer1" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
                height="68" width="680" standby="Loading Media Player components..." type="application/x-oleobject"
                codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsm p2inf.cab#Version=6,4,7,1112">
                <param name="fileName" value="ding.wav">
                <param name="autoStart" value="false">
                <param name="showControls" value="true">
                <param name="AllowChangeDisplaySize" value="false">
                <param name="ClickToPlay" value="true">
                <param name="ShowDisplay" value="0">
                <param name="ShowDisplay" value="false">
                <param name="ShowStatusBar" value="1" />
                <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
                    src="http://localhost:50451/ding.wav" autostart="false" width="680" height="68">
                </embed>
            </object>
        </div>

CSS:

    .media_player
{
    margin-left:0;
    margin-top:0;
    width:680px;
    height:70px;
    background-color:White;
}

Answer 1

您可能想在 HTML header 中使用不同的浏览器特定的 CSS 选择器。使用this site ，那会给你:

<style type="text/css">
    /* Default */
    .media_player {
        width:500px;
    }
    /* Firefox */
    body:last-child .media_player, x:-moz-any-link {
        width:600px;
    }
    /* Chrome (and Safari) */
    .media_player:not(*:root) {
        width:700px;
    }
</style>
<!--[if IE]><style type="text/css">
    /* Internet Explorer */
    .media_player {
        width:800px;
    }
</style><![endif]-->

但是，您可能希望确保包含所有浏览器，而不仅仅是这三个。为确保这一点，您可能需要使用 JavaScript 插件，例如 this one .