Question

给出以下标记

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div.apartBox
{
    padding:12px;
    background: #FFFFFF;
    border: solid 1px #6182A3;
}
.browser
{
    background: #fff;
    border: solid 1px #0055E3;
    border-top: solid 12px #0055E3;
    border-bottom: solid 4px #7A99C5;
    padding:10px 10px 8px 14px;
    color: #333;
    font: 0.8em/1 arial;
    margin: 8px 20px;
}
.callout
{
     background: #EEF2F0;
     border: solid 1px #9CC7C0;
     padding:8px;
}

</style>
</head>

<BODY>

<div class="apartBox" id="subPopout" style="Z-INDEX: 2; WIDTH: 400px; POSITION: relative">
    <div id="upSubPop">
        <div class="callout" id="subDetails">
            <div class="browser">
            <span id="txtExample">Me afecta que digan que soy incapaz.</span>
            </div>
        </div>
    </div>
</div>

</BODY></HTML>

css .browser和.callout中的样式在IE6中不可见，除非我从subPopout手动删除position:relative样式。这个div是从模态弹出窗口自动生成的，所以我很遗憾无法触摸这种风格。它在FF中显示正常。如果我用鼠标选择.browser div，它会在我取消选择时显示！

Answer 1

为什么这些样式在IE6中不可见

简而言之，因为它是IE6！

盒子的高度可以固定吗？

如果是，可能的解决方案是将固定大小设置为upSubPop元素。例如，如果添加：

div#upSubPop{background:red;height:500px;}

到样式表，蓝色边框在IE6中正确显示。

另一种解决方法是将<div class="browser" style="height:1px;" />的高度设置为1像素。在这种情况下，IE6根据内容显示具有适当高度的元素（因此您将看到整个“Me afecta que digan que soy incapaz。”消息。问题是真正的浏览器为FF将然后错误地显示所有内容（更确切地说，消息将与底部边框重叠）。因此，在这种情况下，您可以使用conditional CSS来确保在实际浏览器和IE6中根据需要显示消息块。

为什么这些样式在IE6中不可见

1 个答案: