html - 选择元素在嵌套 div 中不起作用

Question

我的 HTML 是

<div id="div1">
    <div id="div2"></div>
        <div id="div3">
        <div id="div4">
            <select><several options></select>
        </div>            
        </div>
    </div>
</div>

div 是嵌套的，select 元素将不起作用。我在外部文件中使用 CSS，但想问一下这个 HTML 布局本身是否会引起问题。我的理解是，对于 IE6/7，它可能会导致 z-index 问题，但我使用的是 Chrome。

如果有人想花时间审查 CSS，我会很乐意将其发布，但我想先看看它是否可以单独回答。

编辑

这是 CSS。注意，div#2 是半透明背景。其他 div 应该放在它上面。

#div1{
width:100%;
height:8em;
position:relative;
margin-top:3em;
margin-bottom:3em;
border-style:solid;
border-width:thin;
border-color:black;
border-radius:4px;
z-index:10;

#div2{
width:80%;
height:100%;
position:absolute;
margin-top:5%;
left:0%;
background-image:url(images/calendar_original.png);
background-position:center;
background-repeat:no-repeat;
background-size:contain;
opacity:0.2;
z-index:1;
}

#div3{
width:100%;
heigh:40%;
overflow:hidden;
margin-top:1em;
padding-left:1.5%;
z-index:13;
}

#div4{
height:4em;
width:44%;
float:left;
font-family:verdana, Helvetica,Arial,sans-serif;
font-size:medium;
font-weight:bold;
border-style:solid;
border-width:thin;
border-color:black;
overflow:hidden;
z-index:14;}

select{
height:1em;
color:black;
font-family:Helvetica,Arial,sans-serif;
font-size:large;
font-weight:bold;
width:150%;
padding-left:0.5em;
z-index:15;}

Answer 1

请发布您所有的 html。通常，我也会遇到这种情况，我看不到小东西，只有一个字符丢失或在错误的地方会导致错误。

所以，首先您的 HTML 代码有一个 </div> (closed div) 太多，如果这是您的全部代码。可能，您不希望它出现在 <div id="div2"> 之后。 ？

此外，还有什么？如果选择不起作用(在所有浏览器中)，则可能是 "(引号)或/(斜杠)或类似这样的小东西丢失了，或者你写了而不是等。(相信我，我有已经是专家，终于发现我写的是 maibox 而不是 mailbox 等)

取决于您的意思:“不工作”(这通常不是对错误的很好描述)。什么不起作用？您没有看到选择或无法打开它？或者选项没有(完全)显示？

我个人认为它与任何 CSS 或嵌套 div 问题无关，而是与您尚未完全发布的选择/选项标签中的某些代码有关。

此外，请注意:如果您使用 Chrome，仍然有许多用户使用不同的浏览器，所以我想您希望您的代码干净整洁并且在大多数浏览器中都能正常工作，对吧？ ;)

编辑:有一件事实际上会给您的选择带来麻烦，那就是您使用 % 值分配了 div 的宽度。你应该知道它是如何工作的:每个元素假设 100% 是它所在元素的宽度。所以，div4 有 div3 的 44% 宽度，你的选择现在有 150% 的 44% 的 100% 的 80% 的100%。然而，150% 是一个神奇的数字，因此根据溢出情况，您的选择可能会被截断为 100%，而正确的 50% 可能不会显示。

此外，如果您已经使用 png 作为背景图像，您真的需要 div2 上的不透明度吗？