如何编写仅适配移动端竖屏模式Firefox的专用CSS规则？

你的原有代码不生效有两个核心原因：

1. 普通网页场景下，Firefox从v61版本开始就默认禁用了@-moz-document规则，仅允许在用户自定义样式表（userChrome.css、userContent.css）中使用，页面内嵌/外链的CSS写该规则会被直接忽略。
2. 原有媒体查询仅限制了最大宽度，没有新增竖屏状态判断，不符合仅竖屏生效的需求。

场景1：网站开发者给自己的站点加规则 #

这种场景无法使用@-moz-document，需要搭配JS做浏览器检测后匹配样式：
首先在页面加载时执行JS检测，给根元素加专属类：

if (navigator.userAgent.includes('Firefox') && /Android|iPhone|iPad|iPod/.test(navigator.userAgent)) {
  document.documentElement.classList.add('firefox-mobile')
}

再编写对应CSS规则：

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .firefox-mobile .gallery_legend {
    padding-bottom: 26px;
  }
  .firefox-mobile .slide-nav {
    bottom: 11px;
  }
}

注：将宽度阈值调整为768px可适配更多新款小屏移动设备，可根据实际需求调整

场景2：个人用户编写自定义样式（userContent.css/油猴样式） #

这种场景下@-moz-document可以正常使用，仅需要补充竖屏判断即可：

/* for firefox on mobile portrait only */
@-moz-document url-prefix() {
  @media only screen and (max-width: 768px) and (orientation: portrait) {
    .gallery_legend {
      padding-bottom: 26px;
    }
    .slide-nav {
      bottom: 11px;
    }
  }
}

补充排查点 #

如果修改后仍不生效，可以先给属性加!important测试是否是样式优先级被覆盖的问题，示例：
padding-bottom: 26px !important;

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