ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

Safariで崩れる!? floatを使わずdisplay:inline-blockで横並びにする方法

2016年12月10日
safari

コーディング作業で要素を横並びにする際に、display:inline-block;が使われていることがありますが、
結論から言うと、PCページで横幅いっぱいに要素を横並びにする場合は、その方法は使わずfloatで横並びにした方が良いかと思います。
なぜなら、ネット上でよく見かける情報通りに記述すると、safariブラウザで崩れる不具合が起きるからです。
また、その崩れを修正する方法もありますが、letter-spacingでのマイナス値を測って設定する煩わしさもあり、今度はIE7で崩れもおきます。

下記にdisplay:inline-block;を使ってsafariでも崩れない書き方を残しておきますが、この方法は、

・IE7の対応をする必要がない
・横並びにしたい要素の親要素に左右の余白がある(pcページ)
・中央寄せしたい

場合にのみ使用するのが良いかと思います。
ちなみに、スマホだとsafari、androidとも問題なく使用することができるので、スマホページで要素を横並びにして中央揃えしたいという時には便利かと思います!

inline-blockで横並びにする方法(Safariでも崩れなし)

html

1
2
3
4
<ul class="sample">
  <li>サンプル</li>
  <li>サンプル</li>
</ul>

css

CSS
1
2
3
4
5
6
7
8
9
.sample { /* 親要素 */
  font-size:0;
  letter-spacing: -(調整)px; /* 文字間を詰めて隙間をなくす */
}
 
.sample li { /* 子要素 */
  display: inline-block;
  letter-spacing: normal; /* 文字間を元に戻す */
}

safariでは、font-size:1px;以上じゃないと認識してくれないようなので、letter-spacingで親要素にマイナス値を設定し、子要素でそのマイナス値をnormalにすることで解消できるようです。

参考サイト:
http://qiita.com/BEMU/items/0f500e0306471073ed63

関連記事

  • 【css】counter-incrementプロパティを使ってcssでリストに番号をふる方法2016年6月6日 【css】counter-incrementプロパティを使ってcssでリストに番号をふる方法
  • 【css】文章中に改行がある時に、行頭を揃える小ワザ2016年8月17日 【css】文章中に改行がある時に、行頭を揃える小ワザ
  • 超便利! img要素を表示領域(枠内)で上下左右に中央表示させる方法2017年4月19日 超便利! img要素を表示領域(枠内)で上下左右に中央表示させる方法
  • IE7・8も簡単に対応! IEのバージョンごとに cssを適用させるhtml・cssハック2016年12月8日 IE7・8も簡単に対応! IEのバージョンごとに cssを適用させるhtml・cssハック
  • 「もっと見る」ボタンの「>」矢印アイコン画像をレスポンシブでも位置を綺麗に表示する方法2016年11月10日 「もっと見る」ボタンの「>」矢印アイコン画像をレスポンシブでも位置を綺麗に表示する方法

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.