html - 没有样式应用没有 Verflow :Hidden Property To Any Section On Webpage

Question

我正在创建一个基于 Wordpress 的网站我在每个部分都面临一个非常奇怪的问题，当我应用任何样式特别是背景颜色时它不会直接应用，但是当我添加 CSS 属性时如下:

.abc { 
    background-color:red;
    overflow:hidden:
 }

它开始工作正常，而且当未应用溢出属性时，它甚至不会在 Debug模式下突出显示该部分的整个区域。

现在溢出属性的问题是我有一些内容因此被剪切，如下图所示:

在没有溢出属性的情况下，该部分的行为如下图所示:

所以现在我想要该部分的背景颜色，并且不要像您在第一张图片中看到的那样剪切内容。我该如何解决这个问题，我们将不胜感激。

考虑以下结构

<header class="header-abc">
   ::before
   <div class="inner-abc-left">
         <img src="img.jpg">
   </div>
   <div class="inner-abc-right">
         <ul class="navigation">
            <li> < href="#"> abc </a> </li>
            <li> < href="#"> abc </a> </li>
            <li> < href="#"> abc </a> </li>
        </ul>
   </div>
</header>

风格是这样的:

.header-abc {
    background: rgba(0,0,0,0.5);
    position:relative;
    width:100%;
    display: block;
    clear: both;
 }
 .header-abc:before {
     display:inline;
 }

因此，使用这种样式时效果不佳，但添加了一个额外的溢出属性使其可以正常工作。请记住，我正在将 wordpress 与一些页面构建器和购买的主题一起使用。

谢谢

Answer 1

没有链接或 codepen 就不可能解决这个问题，这样我们至少可以看到这个 .abc div 的位置以及它与其余代码的关系。