Html 以特定屏幕大小和useragent为目标来查看/隐藏特定内容

我正在开发一个登录表单，在跨浏览器渲染方面遇到了困难

当我使用Chrome浏览器时，一切都会按它应该的样子显示，登录表单上的页脚就是它应该显示的地方。但是，当我用Firefox打开登录表单时，页脚并不是它应该在的位置，例如在登录表单的底部

我想添加一个

，它只有在Firefox浏览器中打开表单并且显示宽度高于768px时才会显示。它不应该显示在其他浏览器中，如Chrome、Safari等

我在前端使用jade/pug和bootstrap，并使用css将某些规则应用于表单

我的代码如下

杰德/帕格：

hr.div_buttons_ff
.col-md-12.col-lg-12.col-xl-12.col-sm-12
footer.footer_desk
hr.div_footer 
p.no_acc_desk Don't Have an account ?
a.join_now_desk(href="#") Join now.

CSS:

我还尝试了嵌套媒体查询，如下所示：

    @-moz-document url-prefix()
    {
       @media screen and (min-width:768px)
       {
          .div_buttons_ff
          {
             padding: 1px 0px 1px 0px;
             border: none;
             outline: none;
             clear: both;      
         }
      }
   }

我还尝试将

-moz文档url-prefix（）

嵌套到媒体中，但同样没有成功

    @-moz-document url-prefix()
    {
       @media screen and (min-width:768px)
       {
          .div_buttons_ff
          {
             padding: 1px 0px 1px 0px;
             border: none;
             outline: none;
             clear: both;      
         }
      }
   }