Question

我在网页上围绕Flash swf设置了一个圆角边框，公司的徽标需要位于其下方。（正如在http://www.designboutiqueuk.com/loader/index.html）在Safari，Chrome等中正确看到的那样。

问题是，在Internet Explorer中，边框包围闪光灯和徽标（徽标不应位于边框内）。此外，在某些版本的IE中，所有内容都显示为左侧，而它应该在浏览器中居中。如果边界不是在IE中走投无路，这不是世界末日 - 我相信这还不可能，尽管如果你知道不同，这将是一个奖励！任何帮助将不胜感激。非常感谢。

Answer 1

如果没有合适的doctype，你将永远不会让IE尝试像其他更现代的浏览器一样。你处于怪癖模式。将其添加到第一行：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Answer 2

这种情况正在发生，因为根据您的消息来源，您的徽标div位于电影div内。

<div style="width: 800px; margin: 20px auto; padding: 20px; border: #DD002B solid 2px; border-radius: 10px; -moz-border-radius: 10px;">
    <div align="center">

    //movie stuff here

    </div>

    <div style="margin: 0px 0px 0px -20px; padding: 40px 0px; display:block; float: left;"><img src="images/gsma_logo.jpg" width="100px"></div>

</div>

它浮动并被带到正常的文档流程之外，并与填充结合，在现代浏览器中处于良好状态。

尝试将徽标放在最后一个结尾div之外。

Answer 3

我同意杰森的观点。然而，要添加到答案中，您可以使用另一个宽度相同的容器，并将徽标放在那里，就像它所处的那样。您可能需要根据需要调整边距和填充，但是应该大致达到你想要的目标。

<div style="width:800px;margin:20px auto">
  <div style="width: 800px; margin: 0 auto; padding: 20px; border: #DD002B solid 2px; border-radius: 10px; -moz-border-radius: 10px;">
      <div align="center">

      //movie stuff here

      </div>



  </div>
    <div style="margin: 0px 0px 0px -20px; padding: 40px 0px; display:block; float: left;"><img src="images/gsma_logo.jpg" width="100px"></div>
</div>

Answer 4

使用这个CSS：

#movie {
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
padding: 20px; 
border: #DD002B solid 2px; 
border-radius: 10px; 
-moz-border-radius: 10px;
}
#logo {
width: 100px;
height: //logo height
margin-left: auto;
margin-right: auto;
float: left;
display: block;
clear: both;
}

<div id="movie">
 //movie stuff here
</div>
<div id="logo"><img src="images/gsma_logo.jpg" width="100px"></div>

IE中的边框无法正确显示

4 个答案: