Question

我在asp.net Web应用程序上有一个媒体播放器对象。 Chrome和firefox将其显示为vlc播放器，IE将其显示为微软Windows媒体播放器。

这使得嵌入的音频播放器对象的宽度不同。我想使用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标头中使用不同的浏览器特定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。

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

1 个答案: