2012-05-04 88 views
0

我在页面中嵌入了媒体播放器。CSS高度在Firefox中不起作用

而且我已经检测到浏览器解决方案来调整播放器的宽度和高度。

但我发现它不适用于Firefox。

请注意。谢谢。

<object id="player" width="300" height="400" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"> 

    <PARAM NAME="stretchToFit" Value="1"> 
    ................... 
    <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" name="MediaPlayer" src="http://xxxxxxxxxxxxxx" 
    showcontrols="1" showpositioncontrols="0" showaudiocontrols="1" showtracker="0" showdisplay="0" showstatusbar="1" showgotobar="0" 
    showcaptioning="0" autostart="1" autorewind="0" animationatstart="0" transparentatstart="0" allowchangedisplaysize="0" 
    allowscan="0" enablecontextmenu="0" clicktoplay="0" width="300" height="400" stretchToFit="1"></embed> 

的jQuery/javascript代码如下:

jQuery(document).ready(function() { 

     var height; 
     var width; 
     var paddingtop; 

     if (screen.width <= 1280) { 
      width = ($(window).width() - 20); 
      height = width/2; 
      paddtingtop = 4; 

     } 
     else if ((screen.width > 1280) && (screen.width < 1920)) { 
      width = ($(window).width() - 20); 
      height = width/1.7; 
      paddtingtop = 7; 

     } 
     else { 
      width = ($(window).width() - 20); 
      height = width/1.7; 
      paddtingtop = 7; 

     } 
     $("#player").css('width', width); 
     $("#player").css('height', height); 
     $("#player").css('padding-top', paddtingtop); 

    }); 
+0

您是否尝试过增加了测量单元到你的宽度和高度?请提供一个测试用例... – feeela

+0

你知道你声明了全局变量'paddingtop',然后你引用'paddtingtop',对吧? –

+0

另外,你最近的'else'语句是多余的。 –

回答

0

对于你并不需要JavaScript来使其窗口宽度20像素的少你可以使用CSS的宽度。下面是一个简单的例子:http://jsfiddle.net/m5GaA/

你可以找到一个更彻底的CSS的答案在这里:xHTML/CSS: How to make inner div get 100% width minus another div width

除了否则最后已经提到的,在你的第二个的(screen.width> 1280),如果是superflous,条件已经由前面的if保证了。

你错过了一个结束标记,这是你的网页上缺少的吗?这可能是原因。

我看不出为什么不行,但html/css可能是问题的根本原因,如果您仍然需要,请尝试并提供演示。

的代码的jsfiddle:

#HTML 
<div id=wrapper> 
    <div id=inner> 
    content must be present 
    </div> 
</div>​ 

#CSS 
#wrapper { 
    overflow:hidden; 
    background-color:red;   
    padding: 0px 10px 0px 10px; 
    width:100%; 
    height:100%;  
} 

#inner { 
    float:left; 
    background-color:blue;  
    width:100%; 
    height:100%; 
}