滚动顶部的图标箭头没有相同的位置但相同的 CSS

Question

我用 wordpress 和 Astra 制作了这个网站，但我是一个 astra 孩子。

有一个默认的滚动顶部按钮可以正常工作，但我不知道为什么除了文章视图之外的所有页面中的图标箭头位置都很好。 （关于 astra 主题官方看起来不错）

我不会做一个可重复的例子，因为它是整个 wordpress CSS，当我检查时我看到完全相同的 CSS...

（我可以通过在此按钮的所有文章上添加padding-top:20px 来解决此问题，但这不是重点...）

在这里有效：https://2b1stconsulting.com/news/

这里没有：https://2b1stconsulting.com/digitalization-for-petroleum-and-renewable-projects/

模板 PHP 帖子

<?php
/*
 * Template Name: News Template
 * Template Post Type: post
 */
  ?>
<meta name="robots" content="noimageindex">
<?php
     get_header(); ?>

<?php if ( astra_page_layout() == 'left-sidebar' ) : ?>

    <?php get_sidebar(); ?>

<?php endif ?>

    <div id="primary" <?php astra_primary_class(); ?>>

        <section style="transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    padding: 20vh 0px 20vh 0px; background-image: url(/wp-content/uploads/2021/04/General-header-scaled-1.jpeg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;" class="elementor-section elementor-top-section elementor-element elementor-element-d7d8b56 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="d7d8b56" data-element_type="section" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
            <div class="elementor-background-overlay"></div>
            <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fd69444" data-id="fd69444" data-element_type="column">
                    <div class="elementor-widget-wrap elementor-element-populated">
                        <div class="elementor-element elementor-element-abcc2f2 elementor-widget elementor-widget-heading" data-id="abcc2f2" data-element_type="widget" data-widget_type="heading.default">
                            <div style="text-align: center;" class="elementor-widget-container">
                                <h1 style="color: #ffffff; font-weight: 100; letter-spacing: 1.4px; font-size: 5rem;"
                                    class="elementor-heading-title elementor-size-default">News</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <div style="border-bottom:1px solid #585858; border-bottom: 1px solid #585858; width: 70%; padding-top:30px; padding-bottom: 15px;" class="d-flex m-auto">
            <span style="padding-right:15px;" class="ml-auto">Share on: </span>
            <?php
                $url=get_permalink();
            ?>
            <a target="_blank" href="https://www.linkedin.com/sharing/share-offsite/?url=<?php echo $url; ?>">
                <img style="height: 24px!important;;width: 24px;!important;" alt="logo linkedin" src="../wp-content/uploads/2021/04/linkedin-icon-2.svg"/>
            </a>
        </div>

        <?php astra_primary_content_top(); ?>

        <?php astra_content_loop(); ?>

        <?php astra_primary_content_bottom(); ?>

    </div><!-- #primary -->
    <!--return button -->
    <style>
    .elementor-29677{
        display:flex;
        background: #fff;
        padding: 20px 0;
    }
    .elementor-29677 .elementor-element.elementor-element-edbfa72{
        margin-left: 15%;
    }
    .elementor-29677 a{
        display:inline-block;
        border:1px solid #000;
        color:black;
        transition: border 0s;
        width: 180px;
      text-align: center;
    }
    .elementor-29677 a:hover{
        border: 1px solid rgba(0,0,0,0);
    }
    .elementor-29677 a .elementor-button-icon{
        margin-right: 5px;
    }
    .elementor-29677 a svg{
        transform: rotate(180deg);
      margin-bottom: 2px;
    }
    .elementor-29677 a:after{
        height:101%;
        width:103%;
    }
    </style>
    <div class="elementor-29677">
        <div class="elementor-element elementor-element-edbfa72 black-icon mr-auto custom-btn-energy btn-hover-black elementor-widget elementor-widget-button" data-id="edbfa72" data-element_type="widget" data-widget_type="button.default">
                <div class="elementor-widget-container">
                    <div class="elementor-button-wrapper">
                        <a href="/news" class="elementor-button-link elementor-button elementor-size-sm" role="button">
                            <span class="elementor-button-content-wrapper">
                            <span class="elementor-button-icon elementor-align-icon-left">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="6.707" viewBox="0 0 18 6.707"><defs><style>.a,.b{fill:none;stroke:#fff;}.a{stroke-linecap:round;}</style></defs><g transform="translate(-792 -818.146)"><line class="a" x2="17" transform="translate(792.5 821.5)"></line><line class="b" x1="3" y1="3" transform="translate(806.5 818.5)"></line><line class="b" x1="3" y2="3" transform="translate(806.5 821.5)"></line></g></svg>         </span>
                                <span class="elementor-button-text">Return</span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>

<?php if ( astra_page_layout() == 'right-sidebar' ) : ?>

    <?php get_sidebar(); ?>

<?php endif ?>

<?php get_footer(); ?>

Answer 1

这可能是由于在浏览器中启用了Quirks Mode，这是由于在page 之上缺少<!DOCTYPE html>。这就是 html 渲染存在差异的原因。需要 html 的文档类型 通知浏览器预期的文档类型，即 HTML5。

令人惊讶的是，该声明出现在所有其他页面上，箭头似乎也正确定位，这意味着它很可能是一个主题错误。有两种可能的解决方案：

1. 快速修复 css：

   #ast-scroll-top .ast-icon.icon-arrow svg {
    top: 50%;
    transform: translate(0, -50%) rotate( 
    180deg);
    } 
   

2. 修改/检查header.php 或追踪此特定页面上删除此<!DOCTYPE html> 的原因。如果我们有后端访问权限，当然可以提供精确的解决方案。

Answer 2

试试这个

#ast-scroll-top {
    background-color: rgba(226,0,26, .7);
    transition: background-color 0.3s;
    width: 3.1em;
    height: 3.1em;
    display: flex;
    justify-content: center;
    align-items: center;
}

同时删除内联样式display: block

Answer 3

只需将其添加到您的 CSS 中

#ast-scroll-top span{
    margin:1px;
}