- ベストアンサー
MAC版IEのCSS、paddingを適用すると崩れてしまいます。
質問いたします。 下記内容のHTMLを打ちますと、Windows環境では、問題なく左側に余白ができ、右側は何も無く表示されます。ですが、このHTMLをMAC版IEで表示させますと、右側にも余白が表示され、レイアウトが崩れてしまいます。何か、MAC版IEのバグでしょうか？誰か解る方、アドバイスを頂けると、助かります。 それでは、よろしくお願いします。m(__)m <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>実験用</title> <style type="text/css"> <!-- .padding { font-family: "ＭＳ Ｐゴシック", "Osaka"; font-size: 14px; padding-left: 40px; text-align: left; } --> </style> </head> <body bgcolor="#666666" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div align="center"> <table width="500" height="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td class="padding">ながいながい文章を入力して、CSSのpadding-leftで制御をした場合、左側にしかpaddingの設定をしていないのに、右側にも余白が適用されてしまいます。何故でしょうか？</td> </tr> </table> </td> </tr> </table> </div> </body> </html>
- nomura0910
- お礼率51% (30/58)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- ao_
- ベストアンサー率33% (15/45)
#1です。 デーブルを使う事は間違いではないです。私も状況によっては使います。今回の場合、セル自体にpaddingではなく、セルの中にdivとしても解決できます。徐々に覚えるためにもいいのではないでしょうか。 #3さん凄いですね。勉強になりました。
お礼
そうですね、徐々にCSSの部分を増やしてゆきたいので、できるだけ<div>で囲って、組んでゆこうと思っています。 この度は、教えていただきありがとうございました。 大変助かりました。m(__)m
- OhMabu
- ベストアンサー率50% (4/8)
どうしようもないバグですね。 tdにクラス指定をする以上は回避方法が見つからないです。 以下の方法ではどうでしょうか？ <td><span class="padding">文字</span></td>
補足
実験しましたが、ダメでした。(T.T) やはり、どうしようも無いのでしょうか…
- ao_
- ベストアンサー率33% (15/45)
バグかどうかわかりませんが、以前も同じ質問を見ました。 一応解決策として、tableをdivに置き換えてみたらうまく表示しました。 CSSをお使いになられるならいっそtableレイアウトをやめてみてはどうでしょうか？ 以下にソースを付けます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>実験用</title> <style type="text/css"> <!-- .padding { font-family: "ＭＳ Ｐゴシック", "Osaka"; font-size: 14px; padding-left: 40px; width:500px; height:300px; background-color:#FFFFFF; margin:0 auto; } --> </style> </head> <body bgcolor="#666666" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div class="padding">ながいながい文章を入力して、CSSのpadding-leftで制御をした場合、左側にしかpaddingの設定をしていないのに、右側にも余白が適用されてしまいます。何故でしょうか？</div> </div> </body> </html>
補足
なるほど。確かにこの方法なら、レイアウトが崩れることがないです。が…今私は、ドリームウィーバーでホームページを制作しているのですが、テーブルを使わずに、CSSだけで製作するのはちょこっと気が引けます… 難しいと言いますか… 慣れていないと言いますか… テーブルと、CSSを組み合わせて、使用しようというのが、間違いなのでしょうか？やはり、スペーサーGIFに頼るしかないのでしょうか？
お礼
ありがとうございます。無事解決ができました。 CSSは、<td>ではなく、<span>か<div>に適用させるのが良いみたいですね。勉強になりました。m(__)m