mania-ku

何か作りたいプログラマ未満。

【CSS】indentをMac/Winで合わせる

注釈やリストなんかで字下げのindentがよくありますが、

・こんなかんじの
 なかぐろを使ったインデント

※1 こんなかんじの
  半角を含むインデント

(※)こんなかんじの
   かっこを含むインデント

の場合、(たぶんフォントの関係で)Win/Macでインデントずれてしまうことがあります。

解決方法(IE7△CSSハックあり)

左にはみ出る部分をspanに突っ込んでごにょごにょする。
はみ出る部分の中身によって微調整が必要です。
なお、IE7が対象でなければ、ハック部分は全て消してよいのでだいぶ短くなります。

/* HTML */
<p class="indent"><span>(※)</span>インデントを指定したい<br>
あたり</p>
/* CSS */
p.indent {
    padding-left: 3em;
    /padding-left: 2em;
    text-indent: -3em;
}
    p.indent span {
    display: inline-block;
    /display: inline;
    width: 3em;
    text-indent: 0;
    /text-indent: -2em;
}

IE7での確認はこちらから

Pocket
LINEで送る