求助：YouTube按钮高度无法匹配其他社交按钮，CSS样式不生效

看起来你遇到的是第三方组件样式穿透的问题——Google的YouTube订阅按钮是嵌入的iframe组件，它自带了一套样式隔离，直接给父元素.nav--social__link.yt-button设置高度，没办法直接影响到内部的按钮元素。结合你给出的代码片段，我给你调整一下可行的方案：

具体CSS修改方案 #

补全你未写完的样式，并针对iframe做穿透设置：

/* 父容器样式：确保容器尺寸正确，子元素对齐 */
.nav--social__link.yt-button {
  height: 40px !important;
  overflow: visible;
  border-radius: 3px;
  width: 79px;
  margin-right: 4px;
  /* 新增：用flex确保内部按钮垂直居中填满容器 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* YouTube订阅按钮容器：强制继承父容器尺寸 */
.g-ytsubscribe {
  display: block;
  height: 100% !important;
  width: 100% !important;
}

/* 直接针对内部的iframe设置样式（核心！） */
.g-ytsubscribe iframe {
  height: 40px !important;
  width: 79px !important;
  border-radius: 3px;
  /* 去掉默认边框，和其他按钮统一视觉风格 */
  border: none;
}

额外排查建议 #

1. 检查DOM结构：右键点击YouTube按钮，选择“检查元素”，确认按钮是否是iframe形式。如果是其他结构（比如shadow DOM），可能需要调整选择器。
2. 样式优先级：如果还是不生效，试试用更具体的选择器，比如body .nav--social .nav--social__link.yt-button iframe，提升样式优先级。
3. 加载顺序：确保你的CSS在Google订阅按钮的脚本之后加载，或者用DOMContentLoaded事件触发样式设置，避免脚本生成元素后覆盖你的样式。

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