Div 使用 WP_Query 填充，在移动浏览器上表现异常，图形故障

Question

这是我正在开发的 Wordpress 网站上的问题概述。

我从 WP_Query 中填充了 div。它包括背景图像和一些文本。在移动浏览器上查看这些 div 时，通常会出现以下图形故障。（在 Chrome 上更普遍，但确实出现在 safari 上）。

这几乎就像它们出现故障或试图移动但加载不正确。

补充说明，查询调用的帖子是使用高级自定义字段构建的（不确定是否有任何相关性）。 Image of glitch seen on chrome.

这是加载 div 的

的代码

    <?php
                $args = array(
                    'post_type' => 'group',
                    'tax_query' => array(
                            array (
                                'taxonomy' => 'class-type',
                                'field' => 'slug',
                                'terms' => 'speciality',
                            )
                        ),

                );
                $posts = new WP_Query($args);
                if($posts->have_posts()) : 
                    while($posts->have_posts()) : 
                        $posts->the_post();

                        echo '<div class="pt-block chrome-height" onclick="ptmore(this)"  style="background: url(\'',
                        the_field('banner_image'),
                        '\') no-repeat center;">    <div class="pt-name white bold" ><h1 class="bold">',
                        the_title(),
                        '</h1><a class="white bold block-button" ><h3 class="bold">Find out more </h3><img class="arrow-margin" src="/wp-content/themes/bunker/img/parts/arrow-right-yellow.png" width="12" height="12"></a></div>
                            <div id="pt-info-overlay" class="pt-info-overlay" ><div class="pt-info center">
                                                        <h3 class=""></h3><br>
                                                        <h2 class="bold yellow">',
                                                                        the_title(''),
                                                                        '</h2><br><br>
                            <h5 class="">"',the_field('class-info-short'),'"</h5>
                                                                        <a href=',the_permalink(),' class=" bold black-button">Find out more</a>
                                                                        <h3 class="yellow block bold" >Get out of the way</h3>
                                                                        <img src="/wp-content/themes/bunker/img/icons/circle-x.png" width="40" height="40" >


                                                                        </div>
                                                        </div>  

                    </div><div class="clear"></div>';



            ?>

            <?php
                endwhile;
                else: 
                endif;
                wp_reset_query();
            ?>

此代码在同一页面上使用了 3 次，用于查询不同的术语，但其他方面完全相同。这里有一个link到开发环境去查bug。 Development site. 请记住，该错误有时可能需要一些时间才能出现。

任何关于如何解决这个问题的建议都将不胜感激。

Answer 1

您的网站似乎没有正确加载资源。示例：CSS 文件/JavaScript 等。我刚刚测试了您的网站，并在强制刷新后加载正常，但有时并不像您所说的那样。

没有 100% 的解决方案，但我遇到的情况超出了我的理解范围。您的站点在 HTML 标记之前加载了一些 CSS 文件，例如 "font awesome" "slick" 等。我认为这是打断您布局的问题。

您应该在 WordPress 中使用入队方法加载您的资产/资源。不建议在 WordPress 中使用硬编码脚本/样式表。

正确的 HTML 文档必须以 html 开始和结束，但您的网站在 <html> 之外有一些 link 标记，这可能会造成渲染问题（也许).修复它。

Div 使用 WP_Query 填充，在移动浏览器上表现异常，图形故障

Div's populated using WP_Query behaving weird on mobile browsers, Graphical glitches

css

php

wordpress

advanced-custom-fields