Html IE不会在相对定位元素内的浮动元素中显示绝对定位元素_Html_Internet Explorer_Internet Explorer 9_Quirks Mode

Html IE不会在相对定位元素内的浮动元素中显示绝对定位元素

html internet-explorer

Html IE不会在相对定位元素内的浮动元素中显示绝对定位元素,html,internet-explorer,internet-explorer-9,quirks-mode,Html,Internet Explorer,Internet Explorer 9,Quirks Mode,下面是一个示例代码，用于复制我在尝试将元素置于其父元素之上时所面临的问题： <html> <body> <style> dl { border: 1px solid red; width: 200px; padding-top: 40px; margin: 0; position: relative; overflow: auto; } dt

下面是一个示例代码，用于复制我在尝试将元素置于其父元素之上时所面临的问题：

<html>
<body>
<style>
    dl {
        border: 1px solid red;
        width: 200px;
        padding-top: 40px;
        margin: 0;
        position: relative;
        overflow: auto;
    }
    dt {
        border: 1px solid blue;
        margin: 0;
        padding: 0;
        width: 98px; float: left;
        display: block;
    }
    dd {
        border: 1px solid green;
        margin: 0;
        padding: 0;
        height: 38px;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 198px;
    }
</style>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
</body>
</html>


dl{
边框：1px纯红；
宽度：200px；
填充顶部：40px；
保证金：0；
位置：相对位置；
溢出：自动；
}
dt{
边框：1px纯蓝色；
保证金：0；
填充：0；
宽度：98px；浮动：左侧；
显示：块；
}
dd{
边框：1px纯绿色；
保证金：0；
填充：0；
高度：38px；
位置：绝对位置；
顶部：0px；
左：0px；
宽度：198px；
}
咖啡
-黑热饮
牛奶
-白冷饮

我正在尝试构造dl元素，并将dd显示在所有内容的顶部，稍后将通过用户使用javascript选择显示不同的dd-s，这非常简单

当前在ie9的怪癖模式下，如果元素并排浮动，则元素不显示。如果它们没有浮动，它将按预期工作。这是否有一个有意义的解释或修正，使dd元素显示在所有其他元素之上，如在其他浏览器（测试过的chrome、ff、opera、safari）

这是可以解决的，它与子元素的尺寸和外部元素的尺寸以及它们是否适合父元素内部有关。这只在怪癖模式下发生

你的方法不太正确。需要进行一些修改


咖啡-黑热饮
奶白冷饮

*{边距：0；填充：0；}
保险商实验室{
溢出：隐藏；
宽度：300px；
填充：40px；
列表样式：无；
边框：1px纯红；}
ulli{
位置：相对位置；
浮动：左；
宽度：148px；
边框：1px纯蓝色；}
李斯潘{
位置：绝对位置；左侧：-1px；顶部：-40px；
显示：块；宽度：148px；高度：38px；线宽：38px；
边框：1px纯绿色；
}

无法更改html结构，只能解决此css，我解决它是因为它需要一种怪癖模式，即所有内容都适合于所有内容。但是谢谢你的回答，你需要在怪癖模式下运行你的网站吗？它必须在每种模式下运行，这是这里的质量标准。正如你所看到的，我已经解决了这个问题

<ul>
    <li>Coffee<span>- black hot drink</span></li>
    <li>Milk<span>- white cold drink</span></li>
</ul>

* { margin: 0; padding: 0; }

ul {
    overflow: hidden;
    width: 300px;
    padding: 40px;
    list-style: none;
    border: 1px solid red; }

ul li {
    position: relative;
    float: left;
    width: 148px;
    border: 1px solid blue; }

ul li span {
    position: absolute; left: -1px; top: -40px;
    display: block; width: 148px; height: 38px; line-height: 38px;
    border: 1px solid green;
}