css - -moz-box-flex 没有 flex ?适用于(Chrome/Webkit)

标签 css html5-canvas

过去 8 个小时左右,我一直在寻找我可能遗漏的 HTML/CSS 代码,但 Firefox 不会调整我的页面内容?它适用于 Chrome(我一直在确保每个 -webkit-box-flex 都有 -moz-box-flex,反之亦然)。有什么我想念的吗?非常感谢您的时间和帮助!

*
    {margin: 0px;
    padding: 0px;
    }

body
    {width: 100%;
    height: 1000px;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    background-color: #696969;
    background-image: url(squairy_light.png);
    background-repeat: ;
    background-position:;
    }

header, footer, article, nav, section, hgroup, aside
    {display: block;
    }

#banner
    {display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 0px 0px 0px;
    }

#fullpage_box
    {max-width: 1000px;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    }

#page_box
    {display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    }

#content_box
    {-webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horisontal;
    box-orient: horizontal;
    padding: 10px 10px 10px 20px;
    padding: 10px 10px 10px 20px;
    margin: 5px 0px 5px 0px;

    }

最佳答案

Eureka !我找到了修复/问题。

> display: -moz-box;
> display: -webkit-box;

应该只在父文件夹中(在这种情况下只有 #page_box 而不是两者都在)。在我的情况下,这就是有效的。无论如何,显示的 css 是按父 > 子的升序排列的。代码下面是从上面的代码中更正的。希望这对某人有帮助。让我发疯。

  #fullpage_box
    {max-width: 1000px;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    }

#page_box
    {display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    }

#content_box
    {-webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    padding: 10px 10px 10px 20px;
    padding: 10px 10px 10px 20px;
    margin: 5px 0px 5px 0px;

    }

关于css - -moz-box-flex 没有 flex ?适用于(Chrome/Webkit),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16343156/

相关文章:

html - 如何识别 Canvas 中的形状?

javascript - 如何处理2D平台游戏中的复杂输入?

javascript - 如何在 2D Canvas 中实现缩放功能?

javascript - 什么更好?更多 HTTP 请求 = 更少的数据传输或更少的 HTTP 请求 = 更多的数据传输?

javascript - 滚动到页面加载的特定区域并执行 Ajax 查询

css - 使用 span 在 H1 标签的文本旁边放置一个图标

html - 图像周围的 anchor 标记导致填充问题

html - 为什么自定义元素会折叠?

html - 在没有表格的情况下模拟具有列的行

javascript - 使用 Carrierwave 附加 Canvas 图像以形成并上传