IE11中ul元素伪元素无法正常工作问题求助

嘿，我明白你想用伪元素给非全宽菜单加全宽背景的需求——这确实是个巧妙的思路，不过有时候细节容易卡壳。先把你的HTML结构补全（方便演示完整逻辑）：

<div class="primary-menu">
  <nav class="menu-primary-menu-container">
    <ul id="menu-primary-menu" class="menu">
      <li id="menu-item-7031" class="first-menu-item menu-item menu-item-type-post_type menu-item-object-page">
        <a href="#">首页</a>
      </li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page">
        <a href="#">关于我们</a>
      </li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page">
        <a href="#">服务</a>
      </li>
    </ul>
  </nav>
</div>

接下来是核心的CSS实现，我会加上详细注释帮你理解：

/* 父容器：给伪元素提供定位基准 */
.primary-menu {
  position: relative; /* 关键：让伪元素以这个容器为定位参照 */
  margin: 0 auto; /* 保持菜单本身非全宽，居中显示 */
  width: 1200px; /* 菜单的固定宽度，根据你的需求调整 */
}

/* 伪元素：实现全宽背景 */
.primary-menu::before {
  content: ""; /* 伪元素必须的属性，否则不会显示 */
  position: absolute; /* 脱离文档流，不受父容器宽度限制 */
  left: 0;
  right: 0;
  transform: translateX(-50%); /* 关键！让伪元素从视口左边缘开始 */
  width: 100vw; /* 视口宽度，确保背景铺满整个屏幕 */
  height: 100%; /* 和菜单容器同高，背景高度匹配菜单 */
  background-color: #f5f5f5; /* 你的背景色，按需修改 */
  z-index: -1; /* 把背景放在菜单内容下方，避免遮挡点击 */
  top: 0;
}

/* 菜单容器：确保内容在背景上方，可交互 */
.menu-primary-menu-container {
  position: relative; /* 提升层级，确保菜单链接能被点击 */
  z-index: 1;
}

关键逻辑说明： #

• transform: translateX(-50%)：这是实现全宽的核心，因为父容器是居中的（margin: 0 auto），伪元素默认会从父容器的左边缘开始，加上这个属性后，伪元素会向左偏移自身宽度的50%，刚好对齐视口的左边缘，同时右边延伸到视口右边缘，实现真正的全宽。
• width: 100vw：直接使用视口宽度单位，确保背景铺满整个屏幕宽度，不受父容器宽度影响。
• 层级控制：通过z-index把伪元素放在菜单内容下方，保证菜单的链接、文字能正常被点击和显示。

如果你的菜单是自适应宽度（不是固定值），只需要把.primary-menu的width改成max-width: 1200px，其他逻辑完全通用哦。

内容的提问来源于stack exchange，提问作者Kathryn Crawford