Shiny应用本地运行布局样式异常但浏览器访问正常问题咨询

这个问题不是缺少R依赖库导致的，不需要额外安装任何R包。

同一份Shiny应用代码，在部署后通过现代浏览器访问时功能、样式均正常，本地启动后通过RStudio内置查看器打开时出现按钮布局错位、自定义CSS样式失效问题，两种环境效果对比如下：

• 本地运行错位效果：
  
• 浏览器正常运行效果：
  

复现代码如下：

library(shiny)
library(shinyjs)
library(DT)


ui <- fluidPage(tags$style(".act_button {
 width: 200px;
  height: 100px;
  background-color: #ADD8E6;
  border: none;
  display: grid;
  grid-template-columns: auto auto;
  place-content: space-between;
}",".act_button>span {
  padding: 5px;
}",
".act_button>.right {
  justify-self: end;
}",".act_button>.left {
  justify-self: start;
}"),
  useShinyjs(),
  titlePanel("Inputs"),
  fluidRow(
    actionButton("show",class = "act_button", list(span(class="top left", "Top left"), span(class="top right", "Top right"))),
           DTOutput("table2")
  )
)

server <- function(input, output, session) {
  
  hide("table2")
  
  observeEvent(input$show,{
    show("table2")
    hide("show")
    hide("hide")
  })
  
  output$table2 <- renderDT({
    datatable(head(iris), rownames = TRUE)
  })
  
}

shinyApp(ui, server)

样式失效是渲染内核兼容性问题，和R依赖无关：

• RStudio内置查看器采用的是版本老旧的QtWebKit内核，对display: grid（CSS网格布局）这类较新的CSS标准支持存在缺陷，会直接忽略相关布局属性，导致按钮排版错位、对齐规则失效。
• 部署后通过Chrome、Edge、Firefox等现代浏览器访问时，浏览器内核对CSS Grid特性支持完整，所以功能、样式表现全部正常。
• 代码中加载的shiny、shinyjs、DT三个包已经覆盖了所有用到的功能，不存在依赖缺失的情况，安装其他R包无法解决渲染内核的兼容性问题。

• 快速解决：本地运行应用时，点击RStudio运行面板上的「Open in Browser」按钮，调用系统安装的现代浏览器打开应用，样式表现就会和部署后的线上效果完全一致。
• 兼容旧内核方案：如果需要兼容RStudio内置查看器，可以把原代码中基于Grid的按钮样式，替换为兼容性更好的Flex布局实现，替换后的样式代码如下：

tags$style(".act_button {
 width: 200px;
  height: 100px;
  background-color: #ADD8E6;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}",".act_button>span {
  padding: 5px;
}")

替换后不需要修改其他业务代码，在旧版内置查看器里也能实现两端靠上对齐的按钮效果。

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