人に聞けない痔の悩み、これでスッキリ >>

IEではちゃんと表示されているホームページがグーグルクロームでは、壊れてしまいます。
外部CSSファイルを使っていますが、HTMLファイルに特別な書きようがあるのでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (3件)

IEとクロームに限らず、


ブラウザー全て違います(微々たる差)

HTMLに特別な書き方が必要な場合もありますが、
私が考えるに、IEでしかちゃんと表示させられないような書き方をしていると思います。

多少のずれや、マージンの差があっても、ちゃんとした書き方をしていれば、ある程度壊れずに表示されるものです。

特にtableとか、margin、padding、floatあたりが結構シビアに変わってきますので、そこらへんを調べてみてはいかがでしょうか?
    • good
    • 0
この回答へのお礼

ありがとうございました。
当方、初心者で、参考書と首っ引きで、サンプルを参考に、なんとかCSSとHTMLファイルを書き上げました。
試したサンプルは、確かにちゃんと表示されておりましたので、
margin、padding、などは、サンプルのままだとは思うのですが、もう一度確かめてみます。

お礼日時:2009/02/13 21:34

もしあなたがIE6で動作確認をしているのなら、以下のページが役に立つかもしれません。

参考までに。
http://webtech-walker.com/archive/2007/05/212151 …

ホームページを作る際は、IEだけでなくグーグルクロームやFirefox、その他いろいろなブラウザで動作確認をする必要があると思います。

ちなみに参考書通りにしてダメだったのなら、その参考書がダメだということになります。ちなみに過去に私もいくつか参考書を購入しましたが、後から見て間違った内容がいくつかありましたし、結局参考書に書いてあるようなことはあまり使えなかったりします。
    • good
    • 0
この回答へのお礼

ありがとうございました。
紹介いただいた頁をしっかり読んでみます。
参考書の件も了解しました♪

お礼日時:2009/02/14 13:57

> 当方、初心者で、参考書と首っ引きで、サンプルを参考に、なんとかCSSとHTMLファイルを書き上げました。



よし、そんな参考書は今すぐ窓から投げ捨てるべきだ。
あなたが間違いなくその本のHTMLやCSSを一字一句違わず書き移し、IEでは期待どおり表示され、
クロームでは崩れるってんなら、悪いがその参考書は間違ったサンプルを載せてる可能性が高い。

有名な事実なのだが、IEはHTML・CSSの解釈で誤っている所が多く、
Firefoxやクローム、Operaなど他のブラウザはかなり仕様に近い解釈をする。
つまりIEで正しく他で崩れるという現象はそもそも誤った書き方をしている可能性が非常に高い。
なので、そんなサンプルが載っているサイトや参考書はアテにするなと言わざるを得ない訳だ。

※投げ捨てるとは少々過激な表現ですが、こういうアドバイスをしなければならないほど、
 市販の参考書にはいい加減なことが書いてあります。当然よい参考書もあるのですが。。。

ソースがないのでこれ以上具体的にどこが間違っているのかとかは指摘できないが、
marginやpaddingを使っているようなのでwidthの計算のバグじゃないかと予測。

あと、IEのバージョンが6か7か8かでも随分と違ってくる。
そういった情報もあればどんどん伝えていった方がいいよ。
    • good
    • 0
この回答へのお礼

回答をありがとうございました。
ブラウザがそんなに沢山あることも知りませんでした。
marginやpaddingを使っているようなのでwidthの計算のバグじゃないか・・・多分ここいらがやばいんだと思います。
IEを見ながら、ちょっとズラし・・・を繰り返しましたので、
ちゃんと計算してやり直してみます。

みなさん本当にありがとうございました。

お礼日時:2009/02/14 14:02

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QIEとクロームの表示ずれ

普段IEを使ってHPを表示しているのですが、クロームで
表示してみたところ、添付資料のように表示されました。
(レイアウトに関する部分はCSSで定義しています)

他のページもほとんど同じようなズレ方なのですが、
なにか簡単に修正ができるのでしょうか?

Aベストアンサー

IEのバージョンがわかりませんが、たぶんウェブ標準のすべてのブラウザでそうなります。
基本的な対策は、ウェブ標準に直し、IEが互換モードではなく標準モードで起動するようHTMLを修正する必要があります。
 DOCTYPEスイッチで、標準モードで起動するように直すこと
・doctypeスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )

 もちろん、HTMLもDOCTYPEに合わせて修正する必要があるでしょう。
 さすがにないでしょうが、可能ならHTML4.01strict,XHTML1.0strict,XHTML1.1(XHTML1.1にはtransitinalやframesetはない)・・1999年の勧告以来
【引用】____________ここから
HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )]より
 とされてきましたから、strictだとは思いますが・・

 なお、互換モードで一番問題となるのは、IEのスタイルシートのサイズ計算のバグです。
すなわち、コンテナブロックのサイズをpaddin辺の内側ではなくborder辺の内側として計算してしまうことにあります。
 IEを標準にWebページを作成すると良く犯す失敗です。できれば他のウェブ標準ブラウザを使用して作成するほうが無難です。特にFirefoxは開発用ツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )が豊富ですから、この様なときにとても助かります。

IEのバージョンがわかりませんが、たぶんウェブ標準のすべてのブラウザでそうなります。
基本的な対策は、ウェブ標準に直し、IEが互換モードではなく標準モードで起動するようHTMLを修正する必要があります。
 DOCTYPEスイッチで、標準モードで起動するように直すこと
・doctypeスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )

 もちろん、HTMLもDOCTYPEに合わせて修...続きを読む

QIEとGoogleクロームの表示の違い

私は通常はブラウザはインターネットエクスプローラー11を使っています。

自作ホームページ(ビルダーで作成)をGoggleのインデックス登録するのにブラウザはGoogleの方が良いようなのでGoogleクロームで自分のサイトを開いてみましたら、えらい画面のレイアウトが崩れているんです。

これはなぜでしょうか?またGoogleでも正常に表示するには方法がありますか?

Aベストアンサー

ホームページを作成する時の最大の邪魔はIEの存在。
IEだけがW3Cのルールを無視した部分がある。

先ずはモダンブラウザ(Google、Firefoxなど)を基準に作成する。
その上でieで表示してみて、ieでずれた部分を対応する。

方法はケースバイケースなので、都度検索して調べるしかないが、
一番のIEのチョンボはmarginの解釈。
本来marginは境界同士の隙間なのだが、ieは隣の境界から自分のコンテンツまでの隙間と解釈する。

モダンブラウザとIEで両方共となるとpaddingで調整する事になる。

QcssでIEとFIREFOX(とchrome)の表示が違う

http://www.recipe-de-cooking.com/で
IEで見たときとfirefoxで見たときではレイアウトが異なっています。
中央寄せの状況もブラウザで違い、またコンテンツの幅も違っています。
firefoxでは右端が出っ張った形になっています。(ガタガタ)なぜでしょうか?
解決方法がわからないので教えてください。

Aベストアンサー

IEの横幅 -> width
他 -> width + 左右padding(指定があれば) + 左右border(指定があれば)

全体や広告部分にも該当箇所があるかと思います。
これらプロパティを併用しないようなつくりにするか、
ブラウザ別にスタイルを変えるなど対処してください。

「CSSハック」で検索すると、特定のブラウザに向けて
スタイルを設定する方法を説明するサイトが沢山出るかと思います。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qchromeのcss位置ズレについて

CSSのpositionで画像を上にかぶせて表示させています。
そこでIE,firefoxはOKなのですがchromeだけ15pxぐらい下にずれてしまいます。

下記の2つのハックを使った場合、display:noneだと反映されたのですが
positionにすると何も反映しなくなります。

ハックはpositionには効かない、などあるのでしょうか?
どなたか教えていただけますでしょうか。

よろしくお願いいたします。

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

body:nth-of-type(1) #selector {position : absolute;top:960px;left:0px;filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;
}

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

@media screen and (-webkit-min-device-pixel-ratio:0){
#selector {
position : absolute;top:960px;left:0px;filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;
}
}

CSSのpositionで画像を上にかぶせて表示させています。
そこでIE,firefoxはOKなのですがchromeだけ15pxぐらい下にずれてしまいます。

下記の2つのハックを使った場合、display:noneだと反映されたのですが
positionにすると何も反映しなくなります。

ハックはpositionには効かない、などあるのでしょうか?
どなたか教えていただけますでしょうか。

よろしくお願いいたします。

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

body:nth-of-type(1) #selector {position : absolute;top:960px;left:0px;filter: alpha(opacity=85);...続きを読む

Aベストアンサー

趣味でWEBサイトを作成している者です。
あの・・・display:none;で反映されたって・・・消えただけですよね…
これは非表示にする物です。
positionとは何ら関係のないものです。
あとposition:absolute;よりもrelativeの方がいいですよ?
absoluteだとほかと全く独立して位置決めするので画面上部、画面左右からの指定ですが
relativeだと元々出る位置からの指定で、画面倍率の値をいじってもずれません
セットで居る為だと思います。
あと上の画像の値にz-index:1;とでも書いて下さい。
これは画面に対して奥(数字が小さい1)手前(数字が大きい10)というz軸を設定する為のものです。
これ入れるとずれないと思います。
同じ位置で重なるとどうしてもずれが出ると思いますので。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QHTMLファイル同士での値渡し

困っています。

HTMLファイルからHTMLファイルへ移動するときに、
HTMLファイル1でJavaScript で算出された値を
HTMLファイル2へ渡して使用したいのです。

showModalDialogだとダイアログにしか渡せないし・・・。
このように、値をそのまま次のページに渡すための方法を教えてください。
お願いします。

Aベストアンサー

すみません。うっかりしてました。

document.write(FORM[v1]);
では、v1を変数と認識してしまうので、エラーになってしまいますね。

document.write(FORM.v1);  // 「FORM.v1」です
あるいは
document.write(FORM["v1"]);
としてください。

QInner join と Left joinの明確な違いは?

Inner join と Left joinの違いがよくわかりません。
教えてください。

Aベストアンサー

出てくる結果が違います。

テーブル1のフィールド1に、






が、

テーブル2のフィールド1に、






が入力されている場合、

SELECT [テーブル1].[フィールド1], [テーブル2].[フィールド1]
FROM テーブル1 LEFT JOIN テーブル2 ON [テーブル1].[フィールド1]=[テーブル2].[フィールド1];
では、結果は、
テーブル1.フィールド1 テーブル2.フィールド1
1               1
2               2
3               3
4               NULL
5               NULL
6               NULL
の6レコードが出力されますが、

SELECT [テーブル1].[フィールド1], [テーブル2].[フィールド1]
FROM テーブル1 INNER JOIN テーブル2 ON [テーブル1].[フィールド1]=[テーブル2].[フィールド1];
では、結果は、
テーブル1.フィールド1 テーブル2.フィールド1
1               1
2               2
3               3
の3レコードしか出力されません。

出てくる結果が違います。

テーブル1のフィールド1に、






が、

テーブル2のフィールド1に、






が入力されている場合、

SELECT [テーブル1].[フィールド1], [テーブル2].[フィールド1]
FROM テーブル1 LEFT JOIN テーブル2 ON [テーブル1].[フィールド1]=[テーブル2].[フィールド1];
では、結果は、
テーブル1.フィールド1 テーブル2.フィールド1
1               1
2               2
3           ...続きを読む

QIEとfirefox、行間の表示が異なってしまう

ulタグをline-heightで行間指定した場合、firefoxとIEでは表示が異なってしまいます。
firefoxでちょうど良い行間にするとIEでは詰まりすぎて文字がつぶれてしまったり。

解消方法を教えていただけないでしょうか?

Aベストアンサー

line-heightの数値はpx指定ですか?%指定ですか?
IEはpxやptなどでフォントサイズを固定できますが、Firefoxではフォントサイズの固定ができません。
行間をpxなど固定サイズで指定していたとき、文字サイズが変われば行間も見た目が変わってしまいます。

「行間を指定する」
http://www.tagindex.com/stylesheet/text_font/line_height.html

「スタイルシートで使用する長さの単位」
http://www.tagindex.com/stylesheet/basic/length.html


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング