質問: レスポンシブのサイトを作成しているのですが、 PCで見るとdl定義リスト内ddにpタグで箇条書きリストを下記のように作り 2日目以降は2016年等の表記はしないので1日(月)の下にそろえるようにしています。 空白をマージンでとってずれていないのですが、いざサーバーにアップしてiphoneでみてみると微妙に ずれてしまいます。 ### ソースコード ``` 日程 2016年 11月 1日(月) 日程1 2日(火) 日程2 3日(水) 日程3 4日(木) 日程4 5日(金) 日程5 6日(土) 日程6 7日(日) 日程7 ``` ``` dt{ position: relative; width:6rem; float:left; letter-spacing:0.5em; } p{ display:block; font-size: 13px; letter-spacing:0.4em; margin-bottom:60px; padding-left:0.3em; } dd{ margin-left: 8rem; width:605px; padding-bottom:1.5rem; } dd.days p.day{ margin:0 0 0 7.1em; padding:0; } ``` クロムのディベロッパーツールでは文字がずれずにそろっていましたが サファリとFirefoxは少しずれてしまいます。 何卒よろしくお願いいたします。 追記 どこがどのようにずれるとのことですが、 class="day"がついている pタグをこのようにしたいのですが 理想 2016年 11月 1日(月) 日程1 2日(火) 日程2 3日(水) 日程3 4日(木) 日程4 5日(金) 日程5 6日(土) 日程6 7日(日) 日程7 スマホ(iphone5)でみると 2016年 11月 1日(月) 日程1 2日(火) 日程2 3日(水) 日程3 4日(木) 日程4 5日(金) 日程5 6日(土) 日程6 7日(日) 日程7 margin-leftを設定して調節してるのですがこのようになってしまいます。 よろしくお願いします。
回答: 今手元に実機がないので憶測でしかありませんが、 1cssに ``` body{ -webkit-text-size-adjust: none; } ``` を指定してみてください。 僕もこのようなフォントサイズ系で躓いた時にこれで解決したことがあります。 text-size-adjustはOS側でフォントサイズを自動的に調整するプロパティです。 あともう一つ気になったのがpaddingやfont-size等の単位でremとemが混ざっているのはなぜでしょうか。 emに関しては、自分の親要素を基準に考えてしまうので子要素の子要素の子要素と指定していくとどんどんフォントサイズが変更していきます。 仮に全て0.5emを指定した場合、0.5*0.5*0.5という風に。。。 なのですべてremで指定したほうがいいかもしれないなぁと思います! root要素のフォントサイズを基準に考えてくれるのがrem(root + em)ですので! 解答になっていないかもしれませんが、ちょっと試してみてくださいーい!