IE中的边框显示不正确

我在网页上放置了一个围绕Flash SWF的圆形边框，并且该公司的徽标需要位于其下方。（可以在Safari浏览器中正确看到，Chrome等在http://www.designboutiqueuk.com/loader/index.html）。IE中的边框显示不正确

问题是，在Internet Explorer中，边框包围了闪光灯和徽标（徽标不应位于边框内）。在IE的某些版本中，一切都会出现在左边，而它应该在浏览器中居中。如果IE的边界不是圆角的话，那不是世界末日 - 我相信现在还不可能，尽管如果你知道的不同，这将是一个奖励！任何帮助将不胜感激。非常感谢。

来源

2011-07-29 Thomasina

你将永远不会得到IE尝试没有适当的文档类型进行像其他更现代的浏览器。你处于怪癖模式。将此添加到您的第一行：

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

来源

2011-07-29 12:39:57 Rob

太棒了，它好多了！谢谢大家！谢谢！我非常感谢你的帮助！ – Thomasina

@Thomasina - 选择此项作为接受的答案显示感谢。 – Rob

+1好抓@Rob。 –

发生这种情况是因为根据您的来源，您的徽标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之上。

来源

2011-07-29 11:52:39

我同意杰森。然而，要添加答案，您可以使用另一个宽度相同的容器，并将徽标放置在当前所在的位置。您可能需要调整边距和填充以满足您的需求，但是应该大致实现你正在寻找的东西。

<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>

来源

2011-07-29 12:00:30 agmcleod

感谢您的建议！不幸的是，现在你会看到在IE浏览器中发生这种情况（请参阅screengrab，了解它是如何在IE中显示不正确的）http://www.designboutiqueuk.com/loader/Outlook.jpg - 白色背景应该是完全黑色的，边框和电影应该是并且徽标需要在边界正下方显示20px，排列在边界的左侧。在Safari浏览器中，除了徽标没有排列在边界左侧之外，它是个不错的选择。http://www.designboutiqueuk.com/loader/index6.html – Thomasina

围绕您的图片的div的宽度也应该是800px。就白色背景而言，试试这个：http://pastie.org/2289937我在第1行添加了代码，文档类型。去掉身体标签上的属性（第288行），并用CSS第6行至第10行代替它。 – agmcleod

使用这个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>

来源

2011-07-29 12:12:47 Maysam

IE中的边框显示不正确

回答

相关问题