Question

尽管我看到它们在Firefox调试器的 HTML检查器和 CSS规则部分中都已正确设置。

以下是该框的CSS：

.box_background_glass{
  background: rgba(255,255,255,0.5);
}

/*update - this was an inline element
*/

.i_box{
  width:  300px;
  height:  185px;
  border-radius:  4px;
}

这是HTML

<div id='mi_hold'>
    <div id='mi_box'>
      <div id='mi_about'  class='i_box shadow box_background_glass' >
        <p class='mi_tit large_dark'>About</p>
        <p class='mi_con small_light'> foo
          <br>
        </p>
      </div><!-- mi_about end -->

      // ...snip

    </div><!-- mi_box end -->
    <div id='mi_control' class='radius_all'>
      <p id='mi_cover_l' class='menu_bottom small_dark'>foo; </p>
      <p id='mi_about_l' class='menu_bottom small_dark'>About</p>
      <p id='mi_privacy_l' class='menu_bottom small_dark'>Privacy</p>
      <p id='mi_team_l' class='menu_bottom small_dark'>Contact</p>
      <p id='mi_arc_l' class='menu_bottom small_dark'>Developers</p>
  </div><!-- mi_control end -->
</div><!-- mi_hold end -->

Answer 1

您可以在屏幕截图中看到，您已将其设置为display: inline，因此height和width不适用，并且阻止内容无法使用。

您需要display: block。

Answer 2

为display: block;设置mi_about，您应该会看到玻璃框。

为什么浏览器中没有显示此内联元素的样式？

2 个答案: