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

スタイルシートについての質問ですが,IEとGeckoの表示が違いすぎるので修正したいのです。

何処を修正すれば良いのか,又は訂正したCSSをアップしていただけたら幸いです。

IEの方が正常に表示されていると思ってください。

CSSが長いので,テキストとスクリーンショットを作りましたので
http://search.jjkan.net/test/index.html
こちらのリンクを参考にしてください。

<div>を使うと文字や<p>が重なってしまいます。

又,
<?xml version=”1.0” encoding=”utf-8” ?>
を入れると<h1>や<strong>にスタイルが適用されず異様に文字が大きくなりますが
どうすればスタイルが適用されるか
重ねてご教授お願いします。

問題がいち早く解決できれば1000ポイント出します。

●質問者: yoryo
●カテゴリ:コンピュータ
✍キーワード:CSS Gecko IE スクリーンショット スタイル
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● ukon03
●50ポイント

http://cssbug.at.infoseek.co.jp/detail/winie/b121.html

Internet Explorer (Windows) CSSバグリスト

スタイルの問題はこれでないでしょうか?

コメントを全部消してみるのはどうでしょう?


cssは個人的にはGeckoで可能なデザインでにあわせた方が良いと思います。

Geckoで可能なら、IEは互換スイッチで対応できるので。

http://cssbug.at.infoseek.co.jp/detail/winie.html

Internet Explorer (Windows) CSSバグリスト

それでもxml宣言をしてしまうと駄目なんですよね。難しい話です。

http://adp.daa.jp/archives/000265.html

ADP: IE6のwidth解釈バグ対処法

一番の原因はこのバグではないでしょうか?

borderとwidthを一緒に設定している箇所が見受けられます。

◎質問者からの返答

borderとwidthを一緒に設定している箇所を

別々に指定する。

#banner h2 {

font-size: small;

padding: 10px 15px 0px 20px;

border-bottom-style: solid;

border-bottom-width: 5px;

border-bottom-color: #B4D1E2;

}

上を

#banner h2 {

border-bottom-width: 5px;

}

同じIDで別々に指定すれば良いのですか?

独学なので少し足りないのでご教授お願いします。


2 ● dolceromanzo
●150ポイント

http://www.google.com/?

Google

まず、修正個所ですが、3つです。

#banner の height を削除

.center p に clear:left を追加

#center の float:left を削除


そして XML宣言を入れると文字が大きくなる件は、

IEですと XML宣言を入れた文書は 互換モードになり、旧来のフォントサイズバグが再現します。


解決策は、font-sizeをpxやptで指定する事です。

◎質問者からの返答

的確なアドバイスありがとうございます。

とにかくやってみます。

font-sizeをpxやptで指定

というのは%・largeになっている部分を

ptに全て置き換えると言うことでよろしいですか?


3 ● にゃるら
●300ポイント

http://msugai.fc2web.com/web/CSS/box.html

CSS 概説 | ボックス

最初の質問に対する答え


問題点

1.htmlの問題

div要素の開始タグと終了タグの数があってない。

(</div>が一個足りない)

2.cssの問題

#bannerに指定されたボックスの高さ(*1)が、

#banner内の要素のボックス高さの合計(*2)よりも小さい。

*1 #banner { height : 50px ; }

*2 h1要素のボックスの高さ+h2要素のボックスの高さ

解決策

1.#banner { height : 50px ; }を指定しない。

そうするとGeckoでも、IEのスクリーンショットのように表示される。

2.#banner { height : 50px ; }を指定したい場合。

h1要素のボックスの高さ+h2要素のボックスの高さが、

50px以下になるようにする。


<?xml version=”1.0” encoding=”utf-8” ?>を入れると、

<h1>や<strong>の文字が異様に大きくなる問題に対する答え。


たぶんIEでの事だとおもいますが、

原因はfont-sizeプロパティのキーワードでの指定です。


(font-size : small ;やfont-size : xx-large ;など)

IEだと<?xml version=”1.0” encoding=”utf-8” ?>(xml宣言)を入れると、

表示モードが過去互換モードになるバグが有ります。


過去互換モードではfont-sizeプロパティのキーワード指定の解釈などが、

標準モードと違っていて、そのために文字が大きく表示されてしまいます。

(過去互換モードでは他にもボックスモデルの解釈などにバグがあります。)


これを回避するにはキーワードでの指定を避けるしかないと思います。


説明が分かりづらかったらごめんなさい。

◎質問者からの返答

ありがとうございます。

1.htmlの問題は記述ミス

申し訳ないです。

2.#banner { height : 50px ; }

を#banner { height : 100% ; }

にして

#banner h1 { height : 100% ; }

#banner h2 { height : 100% ; }

にしても記述的問題は無いのですか?

一応無事に反映されました。

あとGeckoのスクリーンショットでimgの下にBOX

があります。そこに

が重なっているのですが

どうすれば解決できますか?

.center p {

color: #666666;

font-family: Verdana, Arial, sans-serif;

font-size: 20px;

text-align: left;

font-weight: bold;

border-top: 3px solid #B4D1E2;

border-bottom: 0px hidden #FBCC30;

border-left: 30px solid #B4D1E2;

border-right: 0px hidden #FBCC30;

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

}

にheight: 100% ;

入れても解決できず。

#rightc とか #leftc はひょっとして

もっと上に記述しないといけないのですか?

よろしくお願いします。

関連質問


●質問をもっと探す●



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