网格中的图片在不同浏览器中的显示方式不同

问题描述

因此，我试图将一些图标做成网格：

.wrapper {
    border: medium solid black;
    overflow: hidden;
}

.container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 56.25%;
    font-size: 1vmax;
}

.icons-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 80%;
    width: 98%;
    padding: 1%;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    display: grid;
    grid-template-rows: repeat(7,14.2857%);
    grid-template-columns: repeat(12,1fr);
    grid-auto-flow: column;
    gap: 1%;
}

.icon-item {
    height: 80%;
    pointer-events: auto;
}

.icon-item-wrapper {
    height: calc(100% - 1em);
}

.icon-item-icon {
    height: 100%;
}

<div class="wrapper">
    <div class="container">
        <div class="icons-wrapper">
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000" height="100%"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000" height="100%"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000" height="100%"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000" height="100%"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000" height="100%"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000" height="100%"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000" height="100%"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000" height="100%"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000" height="100%"></div>
                <div class="icon-item-text">Text</div>
            </div>
        </div>
    </div>
</div>

有趣的是，我在不同的浏览器中收到了三个不同的结果。

如果相关，我正在macOS 10.14.6上运行浏览器。

在Chrome 86 / Opera 71中（顺便说一下，这是预期的结果）：

在Firefox 80中：

在Safari 12.1中：

未经IE和Edge测试，但我想情况只会更糟。

还有一个奇怪的错误（在所有浏览器中），导致您在调整窗口大小之前无法正确显示。假设，如果您在Chrome中运行上述代码段，则所有内容都会首先在中间显示（宽度已损坏，与上面的Firefox屏幕截图非常相似），但是如果您浏览整页并返回，则正常显示为屏幕截图。

我知道网格是一个相对较新的功能，仍然存在错误，但这令人沮丧。有什么想法吗？

编辑：好的，有了focus.style的答案，我就能使其在Chrome和Firefox上运行。但是，内容仍然在Safari中溢出（尽管这次至少可见）：

解决方法

我可以同意display: grid;有点毛病，但它已经是一个非常不错且功能强大的工具。但是，在这种情况下，自动缩放比例或内部子标记<img>

会出现问题

首先-不要在height="100%"中使用属性<img>，这有点过时了。您可以在CSS中设置高度。在我的示例中将其删除。

第二个-在.icon-item-icon中只有height: 100%;。但是图片的实际尺寸为1000x1000px。此时，不同的浏览器以不同的方式缩放图像宽度（在grid单元内）。为了防止这种行为，我在图像中添加了max-width: 100%; max-height: 100%;并删除了height: 100%（由于Safari中的问题），因此现在它不能大于其父对象。现在，一切都可以在Chrome，Firefox和Safari（经测试）中正常运行。

.wrapper {
    border: medium solid black;
    overflow: hidden;
}

.container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 56.25%;
    font-size: 1vmax;
}

.icons-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 80%;
    width: 98%;
    padding: 1%;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    display: grid;
    grid-template-rows: repeat(7,14.2857%);
    grid-template-columns: repeat(12,1fr);
    grid-auto-flow: column;
    gap: 1%;
}

.icon-item {
    height: 80%;
    pointer-events: auto;
}

.icon-item-wrapper {
    height: calc(100% - 1em);
}

.icon-item-icon {
    max-width: 100%;
    max-height: 100%;
}

<div class="wrapper">
    <div class="container">
        <div class="icons-wrapper">
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000"></div>
                <div class="icon-item-text">Text</div>
            </div>
        </div>
    </div>
</div>

已更新

网格单元格中的图像高度总是存在一些问题。为object-fit: contain;添加了.icon-item-icon解决方案。

尽管在grid-template-rows: repeat(7,1fr);中更改了.icons-wrapper。

当我们使用网格髓position: absolute时，Safari中有一个奇怪的行为。一些单元格高度问题。不确定，这可能是一些Safari错误。现在已重写包装器。

.wrapper {
    border: medium solid black;
    overflow: hidden;
}

.container {
    font-size: 1vmax;
}

.icons-wrapper {
    height: 80vh;
    width: 98%;
    padding: 1%;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    display: grid;
    grid-template-rows: repeat(7,1fr);
    grid-template-columns: repeat(12,1fr);
    grid-auto-flow: column;
    gap: 1%;
}

.icon-item {
    pointer-events: auto;
}

.icon-item-wrapper {
    height: calc(100% - 1em);
    position: relative;
}

.icon-item-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: contain;
}

<div class="wrapper">
    <div class="container">
        <div class="icons-wrapper">
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000"></div>
                <div class="icon-item-text">Text</div>
            </div>
            <div class="icon-item">
                <div class="icon-item-wrapper"><img class="icon-item-icon" src="https://via.placeholder.com/1000"></div>
                <div class="icon-item-text">Text</div>
            </div>
        </div>
    </div>
</div>

css-grid html

网格中的图片在不同浏览器中的显示方式不同

问题描述

解决方法

相关问答