搜索
搜索

flexbox跨浏览器问题chrome正确显示Firefox无法显示

debugcn 发表于 Dev
5
和

尝试调试flexbox跨浏览器问题。我有一个基本的圣杯布局，具有可滚动的内容，固定的标题和离开画布的左侧导航。

布局在Chrome 45.0.2421.0 m（64位）中正确显示，但在Firefox 38.05中不能正确显示

在Chrome中的外观在此处输入图片说明图片在Firefox中的外观图片在此处输入图片说明

Firefox中的问题

1）没有滚动条

2）页脚缺失或不在页面上

3）在单击切换按钮之前，不可以看到离开画布的左侧导航

4）两侧的栏与内容栏都不​​齐，看起来略高

随附的是布局代码 

@import url("http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css");

html, body {
    box-sizing: border-box;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    box-sizing: inherit;
}

.holy-grail {
    display: flex;
    flex-direction: column;
}

.body {
    flex: 1;
    display: flex;
    flex-direction: row;
    color: #333;
    background: #333;

}

.content-wrapper {
    flex: 1 1 auto;
    order: 2;
    background: #ffc94e;
    display: flex;
    flex-direction: column;
}

.content-header {
    flex: 0 0 50px;
    color: #eee;
    background: #2a2a2a;
}

.content {
    flex: 1;
    overflow: auto;
}

.button {
    cursor: pointer;
}

.button:before {
    content: '\f0c9';
    font: 42px fontawesome;
    color: white;
}

.nav-wrapper, .sidebar-wrapper {
    flex: 0 0 10em;
    display: flex;
    flex-direction: column;
}

.nav-wrapper {
    order: 1;
    transition: flex 1s
}

.nav-wrapper.isOpen {
    flex: 0 0 0;
}

.sidebar-wrapper {
    order: 3;
}

.nav-header, .sidebar-header {
    flex: 0 0 50px;
    color: #eee;
    background: #2a2a2a;
}

.nav-content, .sidebar-content {
    flex: 1;
    overflow: auto;
    color: white;
}

header {
    background: #92e4c9;
    height: 50px;
}

footer {
    background: #f7846a;
    height: 50px;

}
<!doctype html>
<html lang="en">
<head>
    <title>A Holy Grail Flexbox layout</title>

    <link rel="stylesheet" href="styles.css">
</head>
<body class="holy-grail">
<header>
    <h1>Header</h1>
</header>
<div class="body">
    <main class="content-wrapper">
        <header class="content-header">Content Header
            <a id='button' class="button"></a>
        </header>
        <div class="content">TEST
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            TestEnd
        </div>
    </main>
    <nav class="nav-wrapper isOpen" id="nav">
        <header class="nav-header">Header</header>
        <div class="nav-content">
          Nav
        </div>
    </nav>
    <aside class="sidebar-wrapper">
        <header class="sidebar-header">Header</header>
        <div class="sidebar-content">
            TEST
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
            labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
            reprehenderit ullam.
            TestEnd
        </div>
    </aside>
</div>
<footer>
    <h2>Footer</h2>
</footer>
<script>
    document.getElementById('button').addEventListener("click", function (e) {
        document.getElementsByClassName('nav-wrapper')[0].classList.toggle('isOpen')
        e.preventDefault();
    });
</script>
</body>
</html>

i

添加此：

.body {
  min-height: 0;
}


@import url("http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css");
html, body {
  box-sizing: border-box;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.holy-grail {
  display: flex;
  flex-direction: column;
}
.body {
  flex: 1;
  display: flex;
  flex-direction: row;
  color: #333;
  background: #333;
  min-height: 0;
}
.content-wrapper {
  flex: 1 1 auto;
  order: 2;
  background: #ffc94e;
  display: flex;
  flex-direction: column;
}
.content-header {
  flex: 0 0 50px;
  color: #eee;
  background: #2a2a2a;
}
.content {
  flex: 1;
  overflow: auto;
}
.button {
  cursor: pointer;
}
.button:before {
  content: '\f0c9';
  font: 42px fontawesome;
  color: white;
}
.nav-wrapper, .sidebar-wrapper {
  flex: 0 0 10em;
  display: flex;
  flex-direction: column;
}
.nav-wrapper {
  order: 1;
  transition: flex 1s
}
.nav-wrapper.isOpen {
  flex: 0 0 0;
}
.sidebar-wrapper {
  order: 3;
}
.nav-header, .sidebar-header {
  flex: 0 0 50px;
  color: #eee;
  background: #2a2a2a;
}
.nav-content,
.sidebar-content {
  flex: 1;
  overflow: auto;
  color: white;
}
header {
  background: #92e4c9;
  height: 50px;
}
footer {
  background: #f7846a;
  height: 50px;
}
<!doctype html>
<html lang="en">
  <head>
    <title>A Holy Grail Flexbox layout</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body class="holy-grail">
    <header>
      <h1>Header</h1>
    </header>
    <div class="body">
      <main class="content-wrapper">
        <header class="content-header">Content Header
          <a id='button' class="button"></a>
        </header>
        <div class="content">TEST
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          TestEnd
        </div>
      </main>
      <nav class="nav-wrapper isOpen" id="nav">
        <header class="nav-header">Header</header>
        <div class="nav-content">
          Nav
        </div>
      </nav>
      <aside class="sidebar-wrapper">
        <header class="sidebar-header">Header</header>
        <div class="sidebar-content">
          TEST
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
          labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
          reprehenderit ullam.
          TestEnd
        </div>
      </aside>
    </div>
    <footer>
      <h2>Footer</h2>
    </footer>
    <script>
      document.getElementById('button').addEventListener("click", function (e) {
        document.getElementsByClassName('nav-wrapper')[0].classList.toggle('isOpen')
        e.preventDefault();
      });
    </script>
  </body>
</html>

您需要它，因为Flexbox模块更改了的初始值min-height：

4.5弹性项目的隐含最小大小

为了为弹性商品提供更合理的默认最小尺寸，该规范引入了一个新的自动值作为CSS 2.1中定义的min-width和min-height属性的初始值。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在浏览器中无法正确显示/显示Devanagari字体：Chrome，Firefox等

来自分类Dev

在浏览器中无法正确显示/显示Devanagari字体：Chrome，Firefox等

来自分类Dev

Safari和Firefox无法正确显示网站，但Chrome浏览器运行良好

来自分类Dev

浏览器无法正确显示字体

来自分类Dev

Google Chrome浏览器永远无法正确显示字体/不进行平滑处理等

来自分类Dev

从任务栏最大化时，Chrome浏览器无法正确显示

来自分类Dev

Google Chrome浏览器49.0.2623.112版中的Font Awesome图标无法正确显示

来自分类Dev

HTML文档无法在OSX的浏览器上正确显示

来自分类Dev

非Webkit浏览器无法正确显示特殊字符

来自分类Dev

PDFObject在浏览器中无法正确显示

来自分类Dev

htmlspecialchars无法在浏览器中正确显示

来自分类Dev

PDF文件无法在浏览器中正确显示

来自分类Dev

跨浏览器问题：首次加载后，Firefox无法从php文件加载图像

来自分类Dev

跨浏览器问题：首次加载后，Firefox无法从php文件加载图像

来自分类Dev

跨浏览器与换行符的问题：在textarea中显示来自Ajax调用的文本

来自分类Dev

如何使用此按钮菜单解决跨浏览器显示的问题？

来自分类Dev

跨浏览器问题？

来自分类Dev

为什么通过客户端上的XSLT在Google Chrome浏览器中无法正确显示换行（＆＃10;）字符？

来自分类Dev

在Chrome浏览器中显示XML

来自分类Dev

Chrome中的粘性菜单出现问题，因为它在其他浏览器上无法正常显示

来自分类Dev

浏览器无法显示文字

来自分类Dev

在元素跨浏览器上设置显示属性flex

来自分类Dev

如何使用浏览器在Firefox / IE / Chrome中显示ppt / doc / xls / pdf

来自分类Dev

如何在Chrome和Firefox浏览器中显示3D PDF

来自分类Dev

如何在Chrome和Firefox浏览器中显示3D PDF

来自分类Dev

主浏览器（Chrome / Firefox / Edge）能否显示PDF是否受保护？

来自分类Dev

CSS 网格在 Google Chrome 浏览器中显示不正确

来自分类Dev

flexbox后备以在较旧的浏览器中显示表

来自分类Dev

flexbox后备以在较旧的浏览器中显示表

Related 相关文章

  1. 1

    在浏览器中无法正确显示/显示Devanagari字体：Chrome，Firefox等

  2. 2

    在浏览器中无法正确显示/显示Devanagari字体：Chrome，Firefox等

  3. 3

    Safari和Firefox无法正确显示网站，但Chrome浏览器运行良好

  4. 4

    浏览器无法正确显示字体

  5. 5

    Google Chrome浏览器永远无法正确显示字体/不进行平滑处理等

  6. 6

    从任务栏最大化时，Chrome浏览器无法正确显示

  7. 7

    Google Chrome浏览器49.0.2623.112版中的Font Awesome图标无法正确显示

  8. 8

    HTML文档无法在OSX的浏览器上正确显示

  9. 9

    非Webkit浏览器无法正确显示特殊字符

  10. 10

    PDFObject在浏览器中无法正确显示

  11. 11

    htmlspecialchars无法在浏览器中正确显示

  12. 12

    PDF文件无法在浏览器中正确显示

  13. 13

    跨浏览器问题：首次加载后，Firefox无法从php文件加载图像

  14. 14

    跨浏览器问题：首次加载后，Firefox无法从php文件加载图像

  15. 15

    跨浏览器与换行符的问题：在textarea中显示来自Ajax调用的文本

  16. 16

    如何使用此按钮菜单解决跨浏览器显示的问题？

  17. 17

    跨浏览器问题？

  18. 18

    为什么通过客户端上的XSLT在Google Chrome浏览器中无法正确显示换行（＆＃10;）字符？

  19. 19

    在Chrome浏览器中显示XML

  20. 20

    Chrome中的粘性菜单出现问题，因为它在其他浏览器上无法正常显示

  21. 21

    浏览器无法显示文字

  22. 22

    在元素跨浏览器上设置显示属性flex

  23. 23

    如何使用浏览器在Firefox / IE / Chrome中显示ppt / doc / xls / pdf

  24. 24

    如何在Chrome和Firefox浏览器中显示3D PDF

  25. 25

    如何在Chrome和Firefox浏览器中显示3D PDF

  26. 26

    主浏览器（Chrome / Firefox / Edge）能否显示PDF是否受保护？

  27. 27

    CSS 网格在 Google Chrome 浏览器中显示不正确

  28. 28

    flexbox后备以在较旧的浏览器中显示表

  29. 29

    flexbox后备以在较旧的浏览器中显示表

热门标签

归档