我有以下 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 中):
我怎样才能解决这个问题?