Mobile Safari 向けクリアフィックス

・html

<nav class=”nav-topicpath”>
    <ul>
      <li>a</li>
      <li>b</li>
 (ここに擬似要素が入る)
    </ul>
  </nav>

・CSS

.nav-topicpath ul:after{ ←擬似要素セレクタ「:after」でul要素の終了タグの直前に擬似要素を挿入
  content: “”; ←contentプロパティで擬似要素として””(中身なし)を挿入
  display:block;
  clear:both;
}

なお、擬似要素としては他にも :before があり、要素の開始タグの直後に要素が挿入される。

参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

コメントを残す