绝对定位 <img> 在相对定位 <li> 中适用于 chrome 和 IE11，而不是 firefox答案

【问题标题】：absolute positioned <img> within a relatively positioned <li> works in chrome & IE11, NOT firefox绝对定位 <img> 在相对定位 <li> 中适用于 chrome 和 IE11，而不是 firefox
【发布时间】：2019-10-04 19:51:24
【问题描述】：

我正在制作花名册。我有一个绝对定位的容器。在此，我有一个无序列表，其中有几个相对定位的列表项。在每个列表项中，我都有一些文本（显示他们的名字），然后在下面是一个绝对定位的图像（它们的）。它在 Chrome 和 IE 中都很好用。在 Firefox 中查看时，列表项的位置正确，名称也正确，但图像都位于彼此的顶部，因此看起来容器的左下角只有一个。这如何在 Chrome/IE 和 Firefox 上运行？以下是代码示例：

#roster {
    position: absolute;
    width: 1300px;
    left: 50%;
    margin-left: -650px;
    text-align: center;
}

p {
    background-color: rgba(51,51,51,.9);
    height: 40px;
}
li {
    position: relative;
    width: 150px;
    height: 180px;
    border: 1px solid black;
    display: inline-block;
    display: -moz-inline-stack;
    vertical-align: top;
    margin: 5px;
    zoom: 1;
    *display: block;
}

li img {
    width: 150px;
    height: 130px;
    position: absolute;
    left: 0;
    bottom: 0;
    border-top: 1px solid #fff;


}
a {
    text-decoration: none;
    margin-top: 12px;
    }

</style>
<body>

    <div id="roster">
        <ul>
            <li><a href="#"><p>A name</p><img src="_images/stock.jpeg"></a></li>
            <li><a href="#"><p>A name</p><img src="_images/stock.jpeg"></a></li>
            <li><a href="#"><p>A name</p><img src="_images/stock.jpeg"></a></li>
            <li><a href="#"><p>A name</p><img src="_images/stock.jpeg"></a></li>
            </ul>
    </div>

</body>

【问题讨论】：

标签： css image browser css-position compatibility

【解决方案1】：

以防万一以后对某人有所帮助：

使用包装 <div> 而不是 <ul> 和单独的 <div> 而不是 <li> 在所有浏览器中都能很好地工作。一些 CSS 以网格格式定位所有内容，例如：

display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;

【讨论】：