Question

我不知道是否有人问过这个问题，如果是的话，我很抱歉。我可以在辩护中说，我用一个熟悉的标题检查了大约10个问题。

问题在于：

<div id= "">
<object>
   <embed>
      <img src="" />
   </embed>
</object>
</div>

容器对象或嵌入中的一个绝对位于body标签中。取决于哪个浏览器。对于IE 6 7 8，嵌入绝对是药水。对于其他人来说。

试验和错误带我到这个解决方案，它在所有浏览器感谢上帝非常好。

现在我正在添加一个由IMG标签表示的按钮，我也想绝对定位它（这与我的电影相对）。在所有浏览器中（IE 6 7 8除外），这适用于以下CSS：

#closeButton
{
    position:absolute;
    right: 10px;
    top: 10px;
    z-index:400;
    /*background: none;*/
    /*display:none;*/
}

由于我的对象被隐藏到某个点，因此按钮也隐藏在其中/随之而来。

你可能猜不到IE。在那里，不仅按钮可见，而且相对于WINDOW！意味着远离电影。

我添加了一种破解，使用JS来隐藏/显示CSS现在的按钮：

#closeButton
{
    position:absolute;
    right: 10px;
    bottom:55px;
    z-index:400;
    background: none;
    display:none;
}

它采取了正确的地方，并隐藏和显示电影。猜猜是什么，但点击它变得棘手=）因为每当我把鼠标放在按钮上时，电影会触发一个事件onRollOut并且它们都消失了=）搞笑

问题：为什么我的按钮位置相对于窗口？或者问题可能隐藏在其他地方？

PS我使用相对/绝对定位来模拟crossbrowser固定定位，所以我不能放弃它。但按钮的行为是不可接受的=）将它直接放在电影中是很棘手的，我希望没有它就可以完成。虽然这是一种更简单的方法。但每部电影的工作量都会增加。

我将重复此问题仅限IE，在所有其他浏览器中按钮的行为。

整个代码

http://pastebin.com/fZvWyVsF

http://pastebin.com/zJBhNeVB

更新

我尝试了一些有关定位包装器的建议，并进行了一些修改。现在我有了这段代码

<div  id="bigBanner">
        <OBJECT width="100%" height="90"> 
        <PARAM NAME="quality" VALUE="high">
        <PARAM NAME="wmode" VALUE="opaque" >
        <PARAM name="AllowScriptAccess" VALUE="always" >
        <EMBED  src="big.swf" width="100%" height="90" wmode="opaque" quality="high" AllowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
        </EMBED>
        <noembed></noembed>
        </OBJECT>
        <div id="closeButton"><img src="close-box.jpg"  onClick = "HideAll();" title="Закрыть"/></div>
    </div>

拥有这些风格：

http://pastebin.com/dCULjHva

它显示按钮非常好。但它（按钮）仍然“在IE中逃跑”。

Answer 1

不是绝对定位对象/嵌入，而是将其放在包装中并绝对定位所述包装。我还将按钮放在包装中，这样你就可以相对定位它，但仍然可以从外部容器的绝对定位中受益。

<div id= "wrapper">
<object>
   <embed>
      <img src="" />
   </embed>
</object>
<div id="button">foo</a>
</div>

#wrapper{position: absolute;}

Answer 2

我相信你必须把你的电影和按钮（这是绝对定位的）包裹在一个有位置的div中：relative;和宽度和高度（只是为了确定）

<div id= "wrap">
  <object>
    <embed id="movie">
    </embed>
  </object>
  <img src="" id="closeButton" />
</div>

那么CSS就是

 #wrap
 {
      position:relative;
      width:640px;
      height:360px;
 }
 #movie
 {
      position:absolute;
      width:640px;
      height:360px;
      z-index:100;
      top:0;
      left:0;
 }
 #closeButton
 {
      position:absolute;
      right: 10px;
      bottom:55px;
      z-index:400;
      background: none;
 }

我发现大多数定位问题是因为我没有将它包装在定位的东西中：相对。我希望这会有所帮助。

DEMO：http://jsfiddle.net/derno/C8FHR/

将绝对元素放在绝对值内。 IE

2 个答案: