css - CSS *(星号)会破坏布局。怎么修？

Question

当我在css *（星号）中使用它来选择父级的所有子级时，所有子级元素将相互浮动。奇怪的是，当我为<header>元素更改星号并将其也添加到我的HTML的标记中时，所有子元素都将彼此定位。

为什么是这样？

当布局销毁时，我使用以下方法：

<article class="grid_12 post-entry">
                    <a href="#" title="">
                    <figure class="post-thumb">
                        <img src="images/placehold-blog.png" alt="Placehold">

                        <figcaption class="center">
                                <p>Entry</p>
                                <h3>Showreel video.</h3>

                                <p>By Casper Biemans  /  On June 3, 2014  /  In Digital Art</p>
                                <div class="button tertiaire">Read more &rarr;</div>
                        </figcaption><!-- End figcaption -->
                    </figure><!-- End figure.post-thumb -->
                    </a>
                </article><!-- End article.grid_12 post-entry -->

CSS：

.blog .post-entry figure { height: 420px; }
.blog .post-entry figcaption { 
    display: table; 
    background: rgba(0, 0, 0, .65);
}
.blog .post-entry figcaption > * {
    padding: 0;
    display: table-cell;
    vertical-align: middle;
}

当布局完美时，我使用以下方法：

<article class="grid_12 post-entry">
                    <a href="#" title="">
                    <figure class="post-thumb">
                        <img src="images/placehold-blog.png" alt="Placehold">

                        <figcaption class="center”>
                            <header>
                                <p>Entry</p>
                                <h3>Showreel video.</h3>

                                <p>By Casper Biemans  /  On June 3, 2014  /  In Digital Art</p>
                                <div class="button tertiaire">Read more &rarr;</div>
                            </header>
                        </figcaption><!-- End figcaption -->
                    </figure><!-- End figure.post-thumb -->
                    </a>
                </article><!-- End article.grid_12 post-entry -->

CSS：

.blog .post-entry figure { height: 420px; }
.blog .post-entry figcaption { 
    display: table; 
    background: rgba(0, 0, 0, .65);
}
.blog .post-entry figcaption header {
    padding: 0;
    display: table-cell;
    vertical-align: middle;
}

Answer 1

您发布的HTML的第二个块无效，因为有一个奇怪的“字符不会终止文本。这意味着您的CSS可能在”完美布局“版本中无法正常工作。

看到这里：http://jsfiddle.net/s2as09z6/1/

顽皮的角色在下面突出显示：

<article class="grid_12 post-entry">
                <a href="#" title="">
                <figure class="post-thumb">
                    <img src="images/placehold-blog.png" alt="Placehold">

                    <figcaption class="center”> <!----- Bad "!
                        <header>
                            <p>Entry</p>
                            <h3>Showreel video.</h3>

                            <p>By Casper Biemans  /  On June 3, 2014  /  In Digital Art</p>
                            <div class="button tertiaire">Read more &rarr;</div>
                        </header>
                    </figcaption><!-- End figcaption -->
                </figure><!-- End figure.post-thumb -->
                </a>
            </article><!-- End article.grid_12 post-entry -->