元素在重新加载时变得不可见，然后在调整大小时再次可见答案

【问题标题】：Elements become invisible on reload, then get visible again on resize元素在重新加载时变得不可见，然后在调整大小时再次可见
【发布时间】：2021-05-19 11:56:58
【问题描述】：

我正在开发一个网站，但遇到了一些基本的显示问题。

我想使用一个 php 变量来保存数据库中的一个值，该值代表 img 标签的 src 属性。我在 2 个不同的地方执行此操作，一次在导航栏中（它工作得非常好），一次在另一个 div 内，这会导致页面的很大一部分（以及图像容器）变为空白当页面重新加载时。如果我调整窗口大小或打开开发工具，它工作正常。

这是我用于在两个地方显示图像的代码：

$sql = "SELECT * FROM users WHERE user_index=?;";
        $stmt = mysqli_stmt_init($conn);
        if (!mysqli_stmt_prepare($stmt, $sql)) {
            echo $_SESSION['dbError'];
        } else {
            mysqli_stmt_bind_param($stmt, "i", $index);
            mysqli_stmt_execute($stmt);
            $result = mysqli_stmt_get_result($stmt);
            $resultCheck = mysqli_num_rows($result);

            if ($resultCheck > 0) {
                while ($row = mysqli_fetch_assoc($result)) {
                    $responsible = $row;
                }
            } else {
                echo $_SESSION['dbError'];
            }
          mysqli_stmt_close($stmt);
       }

if ($responsible['avatar'] == 'noAvatar') {
            echo '<i class="material-icons">person</i>';
        } else {
            echo '<img src="images/icons/' . $responsible['avatar'] . '">';
        }

$responsible 是数据库中包含列 avatar 且值为 [someName.extension] 的行，例如“考拉.png”。

如果我用一些随机字符串替换 img 元素，一切正常，这就是我发现问题所在：

if ($responsible['avatar'] == 'noAvatar') {
            echo '<i class="material-icons">person</i>';
        } else {
            echo 'This displays fine';
        }

这里有一些图片可以更好地说明这个问题：

picture displayed as wanted (inside the navbar)

blank element after reloading the page

Everything displayed fine after window resize

谢谢！

【问题讨论】：

标签： php html browser frontend

【解决方案1】：

我发现了问题 - Materialize CSS。并不是我想的那样从数据库中获取图片源，而是我想在Materialize CSS标签组件的内容中添加一张图片。

显然，Materialize 选项卡是基于 CSS 轮播的，在某些情况下，它的高度由元素的样式属性设置为一定的值。

问题出在 div 中，该类“tabs-content”是由 Materialize 选项卡自动创建的，通常固定高度为 400 像素，当图像在其中时为 30 像素 div.

这是我添加到我的 styles.css 文件中的代码，用于修复它并将其高度设置得足够大以适应所有内容：

.tabs-content.carousel.carousel-slider .carousel-item.active {
  position: relative;
}

.tabs-content {
  height: auto !important;
  min-height: 100%;
}

如果其他人遇到或将遇到同样的问题，我希望这会有所帮助。

【讨论】：