css - Firefox div 对象高度

Question

我有以下 HTML:

<div id="wrapper">
<div id="radioplayer">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="467" height="26">
    <param name="movie" value="http://www.museter.com/ffmp3-config.swf" />
    <param name="flashvars" value="url=http://stream.../;&lang=nl&codec=mp3&volume=65&introurl=&autoplay=false&traking=true&jsevents=false&buffering=5&skin=http://www.museter.com/skins/eastanbul/ffmp3-eastanbul.xml&title=Zottebeatjes&welcome=Welkom" />
    <param name="wmode" value="transparent" />
    <param name="allowscriptaccess" value="always" />
    <param name="scale" value="noscale" />
    <embed src="http://www.museter.com/ffmp3-config.swf" flashvars="url=http://stream.../;&lang=nl&codec=mp3&volume=65&introurl=&autoplay=false&traking=true&jsevents=false&buffering=5&skin=http://www.museter.com/skins/eastanbul/ffmp3-eastanbul.xml&title=Zottebeatjes&welcome=Welkom" width="467" scale="noscale" height="26" wmode="transparent" allowscriptaccess="always" type="application/x-shockwave-flash" />
    </object>
</div>
<div id="streaminfobar">
    *some info*
</div>
</div>

还有这个 CSS 样式表:

#wrapper {
    min-height:100%;
    width: 100%;
    position:relative;
    display: table;
}
* {margin:0;padding:0;height:100%;}
#radioplayer {
    width: 100%;
    height:26px;
    background-color: #222222;
    text-align:center;
    display: table-row;
}
#streaminfobar {
    width:100%;
    height:auto;
    margin-top:0;
    background-color: #333333;
    color: #5E5E5E;
    display: table-row;
}

示例:http://jsfiddle.net/CXBeE/

问题是 radioplayer div 的高度必须为 26 px，如 css block 中指定的那样。在 Google Chrome 中它确实是 26 像素，但在 Firefox 和 Internet Explorer 中它比 26 像素大很多。

在 firefox 中是这样的:

但它应该是这样的(在 chrome 中):

我该如何解决这个问题？

Answer 1

改变 *{margin:0;padding:0;height:100%;}
到 body, html{margin:0;padding:0;height:100%;}。
您只希望这两个元素达到 100% 高，而不是代码中的每个元素。