ggplotly导出的HTML嵌入网页时Firefox图例显示异常如何解决？

问题原因 #

1. 嵌入标签使用不规范：<embed>标签的设计用途是嵌入PDF、音视频等插件资源，并非嵌入独立HTML页面的标准方案，Chromium内核（Chrome、Edge）对这种非规范用法做了兼容，Firefox未做对应兼容，且你提供的<embed>代码存在语法错误（重复定义style属性、属性值未闭合），Firefox对HTML语法错误的容错率更低，直接导致样式计算异常。
2. Plotly（ggplotly底层依赖的JS库）的跨浏览器渲染差异：Firefox计算水平图例宽度时，会优先继承父页面的字体、缩放参数，你配置的legend.y = -0.15让图例位于画布底部边缘，Firefox计算图例总宽度时容易超出画布可用范围，触发自动挤压导致重叠。
3. 原有iframe高度不足：你设置的iframe高度为600px，底部留给水平图例的空间不足，Firefox会自动压缩图例高度导致条目重叠。

解决方案 #

按以下步骤修改即可解决Firefox下的异常：

1. 优先使用标准iframe嵌入，修正语法错误
   放弃非规范的embed标签，使用修正后的iframe代码，适当调高容器高度给图例留足空间：

<iframe src="https://path/Inzidenz7T_CheckLegend.html"
        scrolling="no"
        frameborder="0"
        width="950"
        height="650"
        marginwidth="0"
        marginheight="0"
        style="padding: 0; display: block; border: none;"
        sandbox="allow-scripts allow-same-origin">
</iframe>

2. 调整ggplotly图例配置，从根源避免挤压
   修改R代码中的legend配置，固定图例条目宽度，避免浏览器自动计算宽度出错：

fig1 <- ggplotly(g.1.1, tooltip = c("text"), dynamicTicks = TRUE) %>% 
  style(hoverinfo = "none", traces = c(1,4,6,8,10,12,14,16,18,20,22,24,26,28,30,32,34,36))  %>%
  config(displayModeBar = T, locale = "de")  %>% 
  layout(hoverlabel = list(align = "left"),
         # 修改图例配置，固定宽度避免挤压
         legend = list(orientation = "h", 
                       x = 0.3, 
                       y = -0.15,
                       entrywidth = 70, # 可按实际图例文字长度调整数值
                       entrywidthmode = "pixels",
                       itemwidth = 25,
                       margin = list(b = 5)),
         hovermode = "y unified",
         hoverdistance = 2,
         showlegend = TRUE ,
         # 给画布底部加边距，避免图例超出范围
         margin = list(b = 40),
         xaxis = list(autorange=FALSE,
                      range = c(as.Date("2020-08-31"),k.DownDat),
                      showgrid = F, ticklen = 10,
                      ticks = "outside",
                      tickmode = "array",
                      tickformat = '%e.%b',
                      ticktext = labels,
                      tickangle = 0,
                      title = ""),
         yaxis = list(autorange = FALSE, 
                      range = c(0,k.MaxWert_proTag + 100), 
                      tickformat = "digits"
         ))

3. 可选：注入自定义CSS强化兼容性
   如果修改配置后仍有异常，可在保存HTML文件时注入自定义CSS，强制Firefox下的图例不自动换行：

library(htmltools)
# 给生成的HTML插入自定义样式
fig1 <- fig1 %>% 
  htmlwidgets::prependContent(tags$style("
    @-moz-document url-prefix() {
      .legendtext { white-space: nowrap !important; }
      .svg-container { width: 100% !important; height: 100% !important; }
    }
  "))
# 保存为自包含HTML文件
htmlwidgets::saveWidget(fig1, "Inzidenz7T_CheckLegend.html", selfcontained = TRUE)

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