gpt4 book ai didi

css - 相对定位的
  • 中的绝对定位的 适用于 chrome 和 IE11,而不是 firefox
  • 转载 作者:行者123 更新时间:2023-11-28 08:19:39 25 4
    gpt4 key购买 nike

    我正在做一个花名册。我有一个绝对定位的容器。在其中,我有一个无序列表,其中有几个相对定位的列表项。在每个列表项中,我都有一些文本(显示他们的名字),然后在这下面是一个绝对定位的(他们的)图像。它在 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;

    关于css - 相对定位的 <li> 中的绝对定位的 <img> 适用于 chrome 和 IE11,而不是 firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28824658/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com