CSS 高度在火狐中不起作用

CSS height not work in firefox

本文关键字：不起作用 火狐 高度 CSS      更新时间：2023-09-26

我在我的页面中嵌入了一个媒体播放器。

并且我检测到浏览器解决方案可以调整播放器的宽度和高度。

但我发现它在火狐中不起作用。

请指教。谢谢。

<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);
    });

对于宽度，你不需要javascript来使窗口宽度小于20px，你可以使用css。下面是一个简单的示例：http://jsfiddle.net/m5GaA/

你可以在这里找到更全面的css答案：xHTML/CSS：如何使内部div获得100%宽度减去另一个div宽度

除了已经提到的最后一个，第二个 if 中的 （screen.width> 1280） 是超浮的，这个条件已经由前一个 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%;
}
相关文章：