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>（封闭div）太多，如果这是你的全部代码。可能你不希望它出现在<div id="div2">之后？

此外，是什么？如果选择不起作用（在所有浏览器中）可能是，可能是“（引用）或/ /（斜线）或者像这样的小东西丢失或者你写的而不是等等。（相信我，我有已经是专家，他们终于发现我写了maibox而不是邮箱等。）

取决于您的意思：“不起作用”（通常不会错误地描述错误）。什么不起作用？你没有看到选择或你无法打开它？或者（完全）没有显示选项？

我个人不认为它与任何CSS或嵌套div问题相关联，而是与您尚未完全发布的select / option标记中的某些代码相关联。

此外，只需注意一点：如果您使用Chrome，仍有许多用户使用不同的浏览器，因此我认为您希望您的代码在大多数情况下都干净整洁，对吧？ ;）

编辑：有一件事，实际上可能会导致您的选择出现问题，那就是您使用％值指定div的宽度。您应该知道这是如何工作的：每个元素假设100％是它所在元素的宽度。因此，div4的宽度为div3的44％，而你的select现在有150％的44％，100％的80％是100％。但是，150％是神奇的数字，因此根据溢出情况，您的选择可以减少100％，右侧50％可能不会显示。

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

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

1 个答案: