相对定位 <li> 内的绝对定位 <img> 适用于 chrome 和 IE11,不适用于 firefox
absolute positioned <img> within a relatively positioned <li> works in chrome & IE11, NOT firefox
我正在制作花名册。我有一个绝对定位的容器。在其中,我有一个无序列表,其中有几个相对定位的列表项。在每个列表项中,我都有一些文本(显示他们的名字),然后在这下面是一个绝对定位的(他们的)图像。它在 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>
以防万一以后对某人有帮助:
使用包装 <div>
而不是 <ul>
和单独的 <div>
而不是 <li>
在所有浏览器上都能很好地工作。一些 CSS 以网格格式定位所有内容,例如:
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
我正在制作花名册。我有一个绝对定位的容器。在其中,我有一个无序列表,其中有几个相对定位的列表项。在每个列表项中,我都有一些文本(显示他们的名字),然后在这下面是一个绝对定位的(他们的)图像。它在 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>
以防万一以后对某人有帮助:
使用包装 <div>
而不是 <ul>
和单独的 <div>
而不是 <li>
在所有浏览器上都能很好地工作。一些 CSS 以网格格式定位所有内容,例如:
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;