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

Question

我在网站上工作时遇到了一些基本的显示问题。

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

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

$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] 的行，例如“koala.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

谢谢！

Answer 1

我发现了问题 - Materialize CSS。并不是我想的那样试图从数据库中获取图像源，而是因为我试图在 Materialize CSS tabs 组件的内容中添加图像。

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

问题出在 div 中 class “tabs-content”，它由 Materialize 选项卡自动创建并具有固定高度通常为 400px，当图像在其中时为 30px div.

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

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

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

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

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

Elements become invisible on reload, then get visible again on resize

html

php

browser

frontend