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는 :

<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 > * { 
    padding: 0; 
    display: table-cell; 
    vertical-align: middle; 
} 

, 나는이 사용

레이아웃이 파괴

, 나는이 사용

.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 -->