Javascript jQuery：设置<；的高度；第节>；和它所有的孩子一样高？

我有这个

<section class="cat">
   <article class="layer"></article>
   <article class="layer"></article>
   <article class="layer"></article>
   <article class="layer"></article>
</section>

<section class="cat">
   <article class="layer"></article>
   <article class="layer"></article>
   <article class="layer"></article>
</section>

因此，所有文章都是当前视口的100%高度，因为我的

body

和

html

也被设置为100%高度

现在，

section.cat

被设置为

display:inline

，这在大多数浏览器中都可以使用，但在Safari 5.0中不起作用

section.cat {
    display:inline;
}

因此，我想用jquery实现这一点，并获取

section.cat中每个子级的高度，然后将其高度设置为该值。否则，
section.cat
s的高度为0，如上所述，Safari 5.0无法处理
display:inline
值

谢谢大家!
 我建议您找到与要解决的问题等效的css，但如果您想要jQuery解决方案，那么它就在这里

var totalHeight;
$(".cat").each(functon(){
   totalHeight = 0;
   $(this).children(".layer").each(function(){
      totalHeight += $(this).height();
   })
   $(this).height(totalHeight);
});

如果section.cat的子元素都是100%宽度和高度，为什么它需要内联？因此，您有
display:table
的文章元素在
display:inline
的section元素中。为什么？节不应该在文章中，而不是相反吗？
display:inline
元素甚至可以有高度吗？还有什么其他显示状态可以设置
section.cat
？我将所有文章元素设置为
display:table
，并且100%高和宽，因此每篇文章都具有当前浏览器视口的精确大小。如您所见，其中一些文章被包装在各个部分中。当我没有将节设置为显示时：内联的非内联的文章是可见的-它们根本不在那里，因为节的高度是0。如果我应用
display:inline
，除了Safari 5.0之外，它工作得很好。还有其他建议吗？谢谢你，你知道一种纯CSS的方法吗？或者jquery是解决这个问题的最佳解决方案吗…jsfiddle.net/LW3bj
var totalHeight;
$(".cat").each(functon(){
   totalHeight = 0;
   $(this).children(".layer").each(function(){
      totalHeight += $(this).height();
   })
   $(this).height(totalHeight);
});