人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

再度質問です。 http://q.hatena.ne.jp/1150021627

やっぱりズレが出てしまうのですが、なぜでしょうか? ソースを見てご教授ください。ズバリの方には高ポイントを約束します。下に載せたスクリーンショットのMacSafariのようにどのブラウザでも見せたいです。

3カラムのセンター(float: left)がIE(winおよびMac)でのみ(ネスケ、firefox、opera、safari などだと問題無し。IEのバージョンでも違うかも)、なぜか右側に寄ってしまっています(左側に余計なマージンが30px分くらい入っているような感じ)。

winIEスクリーンショット
http://unagiinu.img.jugem.jp/20060616_200171.jpg
MacOSX Safariスクリーンショット
http://unagiinu.img.jugem.jp/20060616_200170.jpg

●質問者: unagiinu
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:firefox IE MAC MacOSX opera
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● kazu1107
●30ポイント

http://unagiinu.jugem.cc/を参照してみたのですが、特にずれてないような気がします。ちなみにFirefoxでも正常でした。

正常に表示されているので特にソースも見てないのですが、IEのみその画像のようにずれる原因として予想されるのは、floatとmarginを組み合わせて使ったときに発生するバグが考えられます。詳しくは以下ページを参考にしてください。

http://hail2u.net/blog/webdesign/doubled_margin_bug_at_ie.html


このバグの対応策としては、ものがバグ対策ですのであまり綺麗な方法ではありませんが、一番手軽なのはCSSハックかな?と思います。ここではIEに対応させるためのハック方法を一つ書いておきます。

div{

margin:0px 20px;

_margin:0px 10px;

}

このような指定をした場合、IEの4?6ぐらいでは0px 10pxが設定され、その他ブラウザでは0px 20pxが設定されます。

これはなにもmarginに限ったものではなく、IEがサポートする全てのスタイルがこの記述で設定されます。

◎質問者からの返答

原因が分かりました!

winIE6のあるバージョン、それから、MacIEでのみズレていたのですが(winIE6でもずれないバージョンもありました)、

原因は…

左サイドに置いていた「tagclick」でした…。tagが自動でフォントサイズ調整され(多数あるタグは大きく)るのですが、大きくなってはみ出した分ズレたのでした(他のブラウザでは大丈夫なのですがIEだけ)。お騒がせしました…。

とりあえずtagclickのフォントサイズを小さくすることで対応してます。幅固定のテーブル(スタイルシートでfixedやnowrapタグ)に入れてもダメだったので考え中です。 どうしたらいいでしょうか?


2 ● kakicg
●30ポイント

↓これでうまくいくようです。SafariとWinIE6で確認しました。

#contents #center {

width:425px;

float: left;

padding: 0px;

margin-top: 0px;

margin-right: 20px;

margin-bottom: 0px;

margin-left: 20px;

}

#contents #center .pad {

padding : 0px 0px 0px 0px;

}

<div class="pad">とそれに対応する</div>は削除してもかまいません。

◎質問者からの返答

原因が分かりました!

winIE6のあるバージョン、それから、MacIEでのみズレていたのですが(winIE6でもずれないバージョンもありました)、

原因は…

左サイドに置いていた「tagclick」でした…。tagが自動でフォントサイズ調整され(多数あるタグは大きく)るのですが、大きくなってはみ出した分ズレたのでした(他のブラウザでは大丈夫なのですがIEだけ)。お騒がせしました…。

とりあえずtagclickのフォントサイズを小さくすることで対応してます。幅固定のテーブル(スタイルシートでfixedやnowrapタグ)に入れてもダメだったので考え中です。 どうしたらいいでしょうか?


3 ● harasima
●20ポイント

前回の質問の貴殿の返答

>winIE6(スレイプニル等)でのみ右に寄って、右カラムが下に落ちてしまうのです。

私は”Version: 6.0.2900.2180_xpsp_sp2_gdr.050301-1519”を使用してますが、「右に寄って」というのは正確に判別できませんが、「右カラムが下に落ちて」という症状があります。しかし、これは多くのブログで発生している症状です。

で、原因なんですが、私は”インターネットオプション”>”ユーザー補助”でスタイルシートの一部を無視する設定を意図的にしてます。

具体的には”Webページで指定されたフォントサイズを使用しない”だけにチェックを入れています。


グダグダ書きましたが、IE側の設定によるのではないでしょうか?

◎質問者からの返答

ふーむ、そういうやり方もあるのですね。

上に書いた文章をもう一度。

--------------

原因が分かりました!

winIE6のあるバージョン、それから、MacIEでのみズレていたのですが(winIE6でもずれないバージョンもありました)、

原因は…

左サイドに置いていた「tagclick」でした…。tagが自動でフォントサイズ調整され(多数あるタグは大きく)るのですが、大きくなってはみ出した分ズレたのでした(他のブラウザでは大丈夫なのですがIEだけ)。お騒がせしました…。

とりあえずtagclickのフォントサイズを小さくすることで対応してます。幅固定のテーブル(スタイルシートでfixedやnowrapタグ)に入れてもダメだったので考え中です。 どうしたらいいでしょうか?


4 ● tezcello
●40ポイント

原因は、tagclick でしたか。


対策は、tagclick がキチンと機能していない

(幅を指定しているのに、それを踏み越えてしまうのはバグとも言えるのでは?)

ので、同様の機能を持つものを探してくる(または自作する)か、バグレポートを出して修正してもらうか。


機能を理解していないですが、スペースが限られている所で使う物ではないように思います。

> fixedやnowrap

wrap 出来ないから勝手に幅を変えて表示しようとするのでは?

だから、wrap しないようにしようとするのは方向が違うように思うのですが。

普通は日本語なら勝手にwrapされて困る事の方が多いのですが、Javascript がどんな値を返してるんでしょう?

フォントサイズを小さくすると何が書いてあるか読めないと思うので、CSSによれば5段階表示で最大時は200%になるのでこれを考慮して登録するタグ名を決めたらよいのでは?

◎質問者からの返答

そうですね・・

本来幅指定に従って折り返してくれればいいんですよね。


5 ● kakicg
●60ポイント

>とりあえずtagclickのフォントサイズを小さくすることで対応してます。

>幅固定のテーブル(スタイルシートでfixedやnowrapタグ)に入れても

>ダメだったので考え中です。 どうしたらいいでしょうか?

下のようにしてみたらどうでしょう?

1)htmlのtagclick部分を下のように変更。

<div class="tagclick">

(tagclickのコード)

</div>

2)jm_style.cssに下のコードを追加。

.tagclick {

width: 150px;

overflow: hidden;

}

上の例ではtagclickのはみ出す部分が切れて表示されますが全体のレイアウトには影響を与えません。

表示が切れるのがまずければ2)のoverflowを「hidden」ではなく「scroll」にするとスクロールバーが表示されます。

◎質問者からの返答

ありがとうございます!

その手がありましたね。たぶんハミでるのは少数だろうから、スクロールバーがでるのもいまいちなので"hidden"にしてみました。全ブラウザオッケーです、ありがとうございます!!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ