单击 understrap 主题上的内容区域时显示不必要的边框

Posted 2023-03-06

【中文标题】单击 understrap 主题上的内容区域时显示不必要的边框

【英文标题】：Unnecessary border shown when clicked content area on understrap theme

【发布时间】：2020-09-16 07:34:35

【问题描述】：

我正在使用 Understrap 开发 wordpress 主题，并使用 livecanvas 的 customtrap 子主题。它使用 Bootstrap 4。

我开发了我的主题，但是当我点击主题上的内容区域时出现了不必要的边框。我使用检查器检查了浏览器上的代码，但找不到导致此问题的代码。

这里是底层仓库：https://github.com/understrap/understrap

还有我的page.php

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package understrap
 */

// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;

get_header();

$container = get_theme_mod( 'understrap_container_type' );

?>

<div class="wrapper" id="page-wrapper">

    <div class="<?php echo esc_attr( $container ); ?>" id="content" tabindex="-1">

        <div class="row">

            <!-- Do the left sidebar check -->
            <?php get_template_part( 'global-templates/left-sidebar-check' ); ?>

            <main class="site-main" id="main">

                <?php
                while ( have_posts() ) 
                    the_post();
                    get_template_part( 'loop-templates/content', 'page' );


                
                ?>

            </main><!-- #main -->

            <!-- Do the right sidebar check -->
            <?php get_template_part( 'global-templates/right-sidebar-check' ); ?>

        </div><!-- .row -->

    </div><!-- #content -->

</div><!-- #page-wrapper -->

<?php
get_footer();

我需要使用哪个选择器来防止出现此问题？

这是这样的图像：

1- 第一张图片是默认的

2- 第二张图片当我点击内容区域时

当我点击内容区域时

【问题讨论】：

这种情况只发生在 Chrome 中吗？也像最近一样？ blog.chromium.org/2020/03/…

相当肯定与 :focus 某处有关

:focus 选择器相关的注意事项，我试过很多次。或者我找不到。 @TemaniAfif

它发生在所有浏览器中。只是有不同的颜色@j08691

在这种情况下，我们需要查看一些代码。请在您的问题中输入minimal reproducible example

【参考方案1】：

看看下面的代码，tabindex 用于键盘可访问性。 :focus 被触发 使用tabindex 的地方。

<div class="<?php echo esc_attr( $container ); ?>" id="content" tabindex="-1">

上面提到的div 有一个 id content，所以如果您只想从那里删除轮廓，请使用以下 CSS 代码。

#content outline: none !important; .

不要像*:focus 那样在:focus 中使用星号来解决这个问题，这样可能还会从其他一些样式中删除轮廓。

【参考方案2】：

当我将以下代码添加到 wordpress 中的自定义 css 时：

*:focusoutline: none !important;

它有效。

但我不明白为什么当我将它添加到 style.css 时它不起作用

【参考方案3】：

我很确定这是 CSS 中的 outline 属性。

由于我们现在看不到您的代码，为了调试，我建议您尝试将其粘贴到您的样式中以检查是否有帮助：

* 
  border: none !important;
  box-shadow: none !important;
  outline: none !important;

【讨论】：

我编辑了我的帖子，添加了 understrap repo 和我的 page.php 代码

我也尝试了这些代码，我将它们添加到我的 css 中，但它不起作用

@YMG box-shadow: none !important 怎么样？