跨浏览器的 CSS 流体网格

Question

我正在为一堆我们自己的应用程序/门户创建一个网格系统。我们有基本的网格宽度和间距等；但我们正在考虑让网格稍微响应一下。考虑到这一点，我们想制作一个 flex 网格系统。同时，Ethan Marcotte 确实清楚地记下了响应式设计的基础知识 in his book ，他不考虑谈论这种方法在浏览器中的效果……唉……

据我所知，百分比宽度(对于流畅/flex 布局至关重要)一直是 Opera + Safari 的主要痛点。这是 Opera 中普遍存在的错误，即使流畅的 960gs 在 Opera + safari 上也有问题。

我唯一能找到有效百分比宽度的地方是在 YUI2 中。周围是否有任何 YUI 开发人员有兴趣详细了解他们如何使百分比宽度在 Opera/Safari 上工作？？

这是一个 SOS，适用于经验丰富的开发人员和网格创建者，他们可以就变通方法/解决方案提供建议/指导，以使此类功能跨浏览器运行。

非常感谢! 桑杰

Answer 1

我不知道你所说的“响应式布局”是什么意思，但如果它是关于流体宽度的，那么答案就是一个。 OOCSS Grids .

您需要记住，行和单位(列)在这里不能有边距和填充。内部元素可以有它们。 “面向对象的 CSS”是一种想法，您可以在一个 HTML 标记中使用多个类，这样您就可以创建类:

.inner{
    margin:16px; /* or whatever CSS size you like */ 
}

并将其应用于行或列的每个直接子项，例如:

<div class="myContent inner"/>

您可以将行嵌套在行中，但不能将列嵌套在列中。

.wfull{
    width:100%;
    background:orange;
}
.w950{
    width:950px;
}
<div class="line wfull">
    <div class="line w950"/>
</div>

如果您想查看更复杂的 OOCSS 工作示例(我增强了网格并更改了名称:line->container、unit->column、size1of2->half 等等)，请检查:

asyncode.com

这是(尚未完成)关于我的改进的文档:

docs.asyncode.com/text/RichML-reference

OOCSS 在幕后工作，但名称会按 1:1 复制到 HTML，因此您会知道它是关于什么的。

我在许多浏览器中测试了 OOCSS，没有一个不能处理它。这是可能的，因为 Nicole Sullivan 发现或发明了非常讨厌的 CSS hacks - 不要在家里尝试:)。