IE8.0.6001 Bug:背景显示为隐藏,直到任何元素获得焦点
我发现IE8有一个bug,真的很奇怪。请参阅下面的示例代码:
CSS:
p,h3 {
padding:0;
margin:0;
}
#header {
width:900px;
height:60px;
background-color:#FFFF00;
margin:0 auto;
}
#container {
position:relative;
width:900px;
margin:0 auto;
zoom:1;
}
#box_gerenciar {
position:relative;
width:880px;
height:95px;
padding:10px;
background:url('fundo.png') no-repeat 0 0;
margin-top:30px;
}
#box_gerenciar .foto {
float:left;
margin-left:6px;
margin-top:6px;
}
#box_gerenciar .infos {
float:left;
margin-left:10px;
margin-top:10px;
}
#box_gerenciar .btns {
padding-top:10px;
overflow:hidden;
border:1px solid #000;
}
.btn_editar, .btn_deletar {
float:left;
width:150px;
height:25px;
background-color:#FF0000;
}
#paginas {
float:left;
padding-top:20px;
position:relative;
left:50%;
}
#paginas p {
float:left;
position:relative;
right:50%;
}
#paginas a {
float:left;
padding:5px;
border:1px solid #CCC;
margin-left:7px;
}
HTML:
<div id="header">conteudo cabeçalho</div>
<div id="container">
<div id="box_gerenciar">
<div class="foto"><img src="teste.jpg" border="0" width="148" height="100" /></div>
<div class="infos">
<h3>Titulo da Mensagem</h3>
<p>Data da Publicação</p>
<div class="btns">
<a href="javascript:;" class="btn_editar"></a>
<a href="javascript:;" class="btn_deletar"></a>
</div>
</div>
</div>
<div id="box_gerenciar">
<div class="foto"><img src="teste.jpg" border="0" width="148" height="100" /></div>
<div class="infos">
<h3>Titulo da Mensagem</h3>
<p>Data da Publicação</p>
<div class="btns">
<a href="javascript:;" class="btn_editar"></a>
<a href="javascript:;" class="btn_deletar"></a>
</div>
</div>
</div>
<div id="box_gerenciar">
<div class="foto"><img src="teste.jpg" border="0" width="148" height="100" /></div>
<div class="infos">
<h3>Titulo da Mensagem</h3>
<p>Data da Publicação</p>
<div class="btns">
<a href="javascript:;" class="btn_editar"></a>
<a href="javascript:;" class="btn_deletar"></a>
</div>
</div>
</div>
<div id="paginas">
<p><a href="?pg=0">1</a><a href="?pg=1">2</a><a href="?pg=1">></a><a href="?pg=2">>></a></p>
</div>
</div>
#box_gerenciar
的背景似乎被隐藏,然后如果我关注页面中的任何元素它会出现。真的很奇怪。这只发生在这个版本的 IE 中。我在8.0.76中测试过,效果很好。
有人可以帮助我吗?
I found a bug in IE8, it's really strange. Please see example code below:
CSS:
p,h3 {
padding:0;
margin:0;
}
#header {
width:900px;
height:60px;
background-color:#FFFF00;
margin:0 auto;
}
#container {
position:relative;
width:900px;
margin:0 auto;
zoom:1;
}
#box_gerenciar {
position:relative;
width:880px;
height:95px;
padding:10px;
background:url('fundo.png') no-repeat 0 0;
margin-top:30px;
}
#box_gerenciar .foto {
float:left;
margin-left:6px;
margin-top:6px;
}
#box_gerenciar .infos {
float:left;
margin-left:10px;
margin-top:10px;
}
#box_gerenciar .btns {
padding-top:10px;
overflow:hidden;
border:1px solid #000;
}
.btn_editar, .btn_deletar {
float:left;
width:150px;
height:25px;
background-color:#FF0000;
}
#paginas {
float:left;
padding-top:20px;
position:relative;
left:50%;
}
#paginas p {
float:left;
position:relative;
right:50%;
}
#paginas a {
float:left;
padding:5px;
border:1px solid #CCC;
margin-left:7px;
}
HTML:
<div id="header">conteudo cabeçalho</div>
<div id="container">
<div id="box_gerenciar">
<div class="foto"><img src="teste.jpg" border="0" width="148" height="100" /></div>
<div class="infos">
<h3>Titulo da Mensagem</h3>
<p>Data da Publicação</p>
<div class="btns">
<a href="javascript:;" class="btn_editar"></a>
<a href="javascript:;" class="btn_deletar"></a>
</div>
</div>
</div>
<div id="box_gerenciar">
<div class="foto"><img src="teste.jpg" border="0" width="148" height="100" /></div>
<div class="infos">
<h3>Titulo da Mensagem</h3>
<p>Data da Publicação</p>
<div class="btns">
<a href="javascript:;" class="btn_editar"></a>
<a href="javascript:;" class="btn_deletar"></a>
</div>
</div>
</div>
<div id="box_gerenciar">
<div class="foto"><img src="teste.jpg" border="0" width="148" height="100" /></div>
<div class="infos">
<h3>Titulo da Mensagem</h3>
<p>Data da Publicação</p>
<div class="btns">
<a href="javascript:;" class="btn_editar"></a>
<a href="javascript:;" class="btn_deletar"></a>
</div>
</div>
</div>
<div id="paginas">
<p><a href="?pg=0">1</a><a href="?pg=1">2</a><a href="?pg=1">></a><a href="?pg=2">>></a></p>
</div>
</div>
The background of #box_gerenciar
appears to be hidden and then if I focus on any element in page it will appear. It's really strange. It only happens in this version of IE. I tested it in 8.0.76 and it worked fine.
Could someone help me?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论