IE8.0.6001 Bug:背景显示为隐藏,直到任何元素获得焦点

发布于 2024-12-03 18:00:20 字数 3236 浏览 1 评论 0原文

我发现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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文