0

我有以下 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 块中所指定。在 Google Chrome 中,它确实是 26 像素,但在 Firefox 和 Internet Explorer 中,它远远超过 26 像素。

在Firefox中是这样的:

在火狐中

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

在谷歌浏览器中

我怎样才能解决这个问题?

4

2 回答 2

2

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

于 2013-04-18T11:32:25.223 回答
0

您的 HTML 缺少结束 div。或者这只是这个简化示例中的一个错误?

于 2013-04-18T11:27:25.397 回答