Question

html lang="{jrCore_lang module="_settings" id="lang" default="en"}" dir="{jrCore_lang module="_settings" id="direction" default="ltr"}" class="app js no-touch no-android chrome no-firefox no-iemobile no-ie no-ie8 no-ie10 no-ie11 no-ios no-ios7 ipad"

发生的事情是我在html标签上有类＆＃34; app＆＃34;我不想用于Firefox（因为它不能在那里工作），但我想用于其他浏览器。什么是解决方法？

代码是这样的：

.app,
  .app body {
    height: 100%;
    overflow: hidden;
  }
  .app .hbox.stretch {
    height: 100%;
  }
  .app .vbox > section,
  .app .vbox > footer {
    position: absolute;
  }
  .app .vbox.flex > section > section {
    overflow: auto;

似乎主要问题来自于此：

  .vbox {
    display: table;
    border-spacing: 0;
    position: relative;
    height: 100%;
    width: 100%;
  }
  .vbox > section,
  .vbox > footer {
    top: 0;
    bottom: 0;
    width: 100%;
  }
  .vbox > header ~ section {
    top: 50px;
  }
  .vbox > header.header-md ~ section {
    top: 60px;
  }
  .vbox > section.w-f {
    bottom: 50px;
  }
  .vbox > section.w-f-md {
    bottom: 60px;
  }
  .vbox > footer {
    top: auto;
    z-index: 1000;
  }
  .vbox.flex > header,
  .vbox.flex > section,
  .vbox.flex > footer {
    position: inherit;
  }
  .vbox.flex > section {
    display: table-row;
    height: 100%;
  }
  .vbox.flex > section > section {
    position: relative;
    height: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .ie .vbox.flex > section > section {
    display: table-cell;
  }
  .vbox.flex > section > section > section {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

使用位于页面顶部的主要绝对元素转到顶部，页面上没有任何内容。

页面：http://dev.wowmusic.fm/

感谢您的帮助。

[更新] 如果我带走显示：表格

.vbox {
    display: table;
    border-spacing: 0;
    position: relative;
    height: 100%;
    width: 100%;
}

似乎让页脚元素的绝对定位起作用（但我打赌我需要显示：表格用于其他内容）。

Answer 1

假设您的html级别的浏览器类设置正确，我认为您只能这样做：

.no-firefox .app,
  .no-firefox .app body {
    height: 100%;
    overflow: hidden;
  }
  .no-firefox .app .hbox.stretch {
    height: 100%;
  }
  .no-firefox .app .vbox > section,
  .no-firefox .app .vbox > footer {
    position: absolute;
  }
  .no-firefox .app .vbox.flex > section > section {
    overflow: auto;
  }

我建议您研究为什么某种基本样式适用于其他浏览器而不适用于Firefox，但这是您的选择。

代码不能用于firefox

1 个答案: