数字の単位の種類について
-
0 名前： ttt ： 2005/09/09 17:35
- ALL CSSでレイアウトするようになって数ヶ月になりますが、
WinのIEを中心に製作してまして、出来たものをMacとかで見ると
どうしても崩れます。WinとMacだと単位の基本が異なってると聞きましたが、
それでも両方で同じように見せてるサイトはいっぱいあります。
やはり数字単位の指定に関係してきてるのでしょうか？
単位の種類は色々ありますが、どれを使うのがオススメですか？
私は殆どpxを使ってます。
ただ、マージンの設定で、センタリングするのはmargin: 0 auto;がいいって
聞きましたが、IEだとセンタリングされないので%指定をして無理やり
センタリングっぽく見せてます…。
アドバイスお願いします。
-
1 名前： 愛浦憂馬 ： 2005/09/09 17:35 ［URL］
- ちょっと抽象的で分からないです。
ＵＲＬを出してもらえれば。
-
2 名前： モノ ： 2005/09/09 17:35
- >やはり数字単位の指定に関係してきてるのでしょうか？
>単位の種類は色々ありますが、どれを使うのがオススメですか？
様々な場合によって適切な単位というのは違ってくるでしょう。
個人の意見を述べさせてもらうと、
文字サイズの指定は%、
ブロック要素のwidthはem、
margin・paddingもほとんどをemにしています。
>私は殆どpxを使ってます。
お好きなように。
IEでのセンタリングのバグに関しては、
text-align:center;
をbodyに加えるという処理もあるようですが、
元のソースを提示スれば
より適切なアドバイスを得られるでしょう。
-
3 名前： ttt ： 2005/09/09 17:35
- 全ページは大変なので、一部分だけお願いします。
.list_sita {
background-image: url(list_sita.jpg);
background-repeat: no-repeat;
height: 196px;
width: 511px;
}
.list_photo {
background-image: url(list_photo.gif);
background-repeat: no-repeat;
float: left;
height: 120px;
width: 120px;
margin-top: 14px;
margin-left: 11px;
padding: 6px;
}
.list_text_sita {
float: left;
height: 162px;
width: 324px;
margin-left: 10px;
margin-top: 14px;
font-size: 12px;
line-height: 17px;
font-weight: normal;
color: #F46200;
}
.list_text_1 {
background-image: url(list_text_1.gif);
background-repeat: no-repeat;
height: 23px;
width: 239px;
padding-top: 6px;
padding-left: 85px;
overflow: hidden;
}
.list_text_2 {
background-image: url(list_text_2.gif);
background-repeat: no-repeat;
height: 23px;
width: 239px;
padding-top: 6px;
padding-left: 85px;
overflow: hidden;
margin-top: 5px;
}
.list_text_3 {
background-image: url(list_text_3.gif);
background-repeat: no-repeat;
height: 23px;
width: 239px;
padding-top: 6px;
padding-left: 85px;
overflow: hidden;
margin-top: 5px;
}
.list_text_4 {
background-image: url(list_text_4.gif);
background-repeat: no-repeat;
height: 23px;
width: 239px;
padding-top: 6px;
padding-left: 85px;
overflow: hidden;
margin-top: 5px;
}
.list_botn {
height: 26px;
width: 324px;
margin-top: 5px;
}
<div class="list_sita">
<div class="list_photo"><img src="#" width="120" height="120"></div>
<div class="list_text_sita">
<div class="list_text_1"></div>
<div class="list_text_2"></div>
<div class="list_text_3"></div>
<div class="list_text_4"></div>
<div class="list_botn"><a href="#"><img src="list_botn2.gif" alt="" width="324" height="26" border="0"></a></div>
</div>
</div>
これの場合だと、左上からのマージンが崩れます。
数値的には本当は.list_photoのmargin-left: 11px;を
22px位が丁度いいハズなのですが、倍位に膨らんでしまうので、
数字を半分にしてWinでは丁度いいのですが、Macでは数字通り？に
左すぎてしまいます。TOPもです。
他にもmargin-top:が反映されてなかったり(Macで)とかあります。
