在手风琴菜单打开时,我的列表项的子标签元素在IE中消失

Question

我有一个在Chrome和FF中运行得非常完美的应用程序,然而,当我在IE中查看它时,一切都很好,直到我点击一个头元素来激活它(jQuery手风琴).

然后发生的事情是,我看到内容在那里的短暂闪光,然后突然整个左列消失.此列由浮动标签元素生成,其类别为".left",如下所示...

<ul class="menu collapsible">
<li class='expand sectionTitle'><a href='#'>General Settings</a>
    <ul class='acitem'>
        <li class="section">
            <label class="left">This item if floated left with a defined width of 190px via css. This is the item that's disappearing after a brief display</label>
            <input class="input" value="input element here" />
            <label class="description">This element has a margin-left:212px; set via css in order to be positioned to the right of the label element as if in an adjacent table cell. When I add a max-width property to this element, it disappears in IE too!</label>
        </li>
    </ul>
</li>
</ul>

正如您在上面的代码中的注释中所看到的(对于两个标签元素),一旦我在其上设置了最大宽度,描述标签就会消失(我在左侧标签元素上没有最大宽度,但它消失了尽管如此).

这个UL菜单的初始视图很好(注意扩展类声明,它使得手风琴的这一部分在启动时打开.直到我点击"常规设置"才能将其关闭,然后再打开,左边的类元素消失(仅在IE中)

Answer 1

这个没有答案,但我终于明白了.因此,如果其他人有IE7和手风琴菜单的问题,这是解决方案.

我有一个容器div,其位置设置为相对.我必须将position属性更改为"static",然后绝对将子元素相对于body定位(而不是相对于容器div).

通过在IE中使用IE特定的css预先设置,我能够保持非IE css相对于父div的位置

例:

.wrapperDiv {
//all browswers except IE
position:relative; 
//IE gets this
*position:static;
}

.childDivExample {
//non IE positioning is relative to wrapperDiv
margin-left:20px;
//IE position is relative to the body document
//any property prepended with a "*" is only recognized by IE
enter code here
*position:absolute;
*left:200px;
*top: 100px;
}