- ベストアンサー
IE7とIE8の表示相違
自社のホームページを制作しているんですが、IE7とIE8で画像の表示が異なったので質問させていただきます。 ※PC関連の専門知識が初心者なので、文章がおかしな部分があるかと思います。 あらかじめご了承ください。 【相違点】 ・CSSでheight: 165px、width: 900pxを指定。画像がheight: 200px、width: 400pxです。 →IE7だと画像が切れてしまう →IE8以降のPCでは、画像が途切れることなく綺麗に全体画像が表示される。 IE7とIE8で画像表示に関して異なることがあるのでしょうか？ 分かる方教えて下さい。
- 10momin
- お礼率85% (6/7)
- ブラウザ
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
まず、HTMLのDOCTYPE宣言を見直す。 DOCTYPEスイッチ( 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 )で、ブラウザが標準モードで動作するように指定します。 ★今後のHTMLはすべて標準モードですので、互換モードで記述する必要はありません。 ☆できれば、ウェブ標準のHTML4.01strict,XHTML1.1strict,XHTML1.1--HHTML1.1以降はstrictしかありません。
関連するQ&A
- IE７の表示崩れを直したい
CMSでCSSを使ってサイトを作成するにあたり、IE7だけ表示が崩れてしまうのですが、何が原因で崩れてしまうのかがわかりません。 IE6、IE8、Firefox、Opera、Safariともに表示が崩れないのですが、これはIE7単体のバグなのでしょうか？ ・サイトURL http://www.tantanmen.com/site/index.html ・CMSは、SOY-CMSを使っています。 おそらくは、大きな画像部分のCSSの記述の問題化と思うのですが、このように記述しております。 /*トップイメージの設定*/ #top_image { width: 1000px; height: 528px; clear: both; width: 1000px; height: 528px; padding: 0; background: url("img/top_image01.jpg") 0 0 no-repeat scroll; text-indent: -9999px; display: block; } どうぞ、よろしくお願いいたします！
- ベストアンサー
- HTML
- IE6で表示がずれて困っています。
IE6で表示がずれて困っています。 firefox・IE８では表示されるのに、IE6ではずれてしまいます。 質問したい事が２つあるのですが、 １つ目は インラインフレームでIE６だけサイズが大きくなる。 原因とサイズの揃え方を教えて下さいm(__)m 画像添付とソースをはります。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="testcss.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <p><img src="images/news.gif" width="490" height="29" /></p> <iframe src="news.html" id="newsi" frameborder="0" scrolling="auto"></iframe> </div> </body> </html> ●CSS● *{ margin: 0; padding: 0; } div{ width:490; height:200; } #newsi{ width: 486px; height: 150px; border: 2px #F96 solid; } --------------------------------------------------------- 一つ目は以上です。 二つ目もここにで質問したかったのですが、文字数が足りないためもう一度質問させていただきますm(__)m 初心者でわからない事が多いため、できるだけ詳しく教えて下さい。 宜しくお願いいたしますm(__)m
- ベストアンサー
- HTML
- IEでのテーブル表示について
こんにちは。 web作成初心者です。 今回ホームページ作成することになり，一から（テンプレートを使わずに）必死にもがいております。 いろいろ新たに知ることは多く，CSSの初期化は理解し実装しております。 そこで，今回ドロップダウンメニュー（CSS）の下に左に画像，右に文書を入れたいと思い， tableを入れてみたのですが…firefoxではきれいに表示されるのですが， IEでは表示されません（文字のみ表示）。 いろいろ調べてみても原因が不明です。 tdの中の border-width : 1px; を外せば枠線は表示されますが色が反映しません。 いろいろご教授よろしくお願いいたします。 ［HTML］ <table class="top" border="1"> <tbody><tr> <td>aaa</td> <td>bbb</td> </tr></tbody></table> ［CSS］ .top{ position : absolute; top : 122px; width : 792px; height: 200px; z-index : 1; } .top td { border-color : red; border-width : 1px; }
- ベストアンサー
- CSS
- IE6でmax-width:100px; max-height:100pxを実現にするには
BLOGでエントリーから画像だけを読み出しサムネイルを集めたhttp://www.photocase.com/photobrowser.aspのようなページを作ろうと考えています。 画像の大きさはまちまちなのでmax-width:100px; max-height:100pxとしました。 しかしmax/min-height/widthはIE6に対応しません。 そこで▼以下の２つを試してみました。 ・max-width in Internet Explorer（IE独自のexpressionを利用） http://www.svendtofte.com/code/max_width_in_ie/ ・minmax.js module（Java Scriptを利用） http://doxdesk.com/software/js/minmax.html ただしこれらの使用方法に従って記載しても、max-width:100px; height:100px（縦長の画像は100px×100pxに）またはwidth:100px; max-height:100px（横長の画像は100px×100pxに）となってしまいます。 Java Script、CSS、または両方を使って解決できる方法がありましたら教えていただけませんでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- IE6での表示がうまくいかず困っています
すみません！先ほど同様の質問をしたのですが、文字数オーバーで途中で切れてしまっていたので本当に恐縮ですが再度お願いいたします。 コーディングを勉強中なのですが、どうしてもIE6での表示がうまくいかず、大変困っています。色々ググって調べてみたのですが、決定的な原因がわからず本当にどうすればよいのかわかりません・・・。どなたかご教示いただけませんでしょうか。 他のFireFOX,Safari,IE8では多少のズレはあるものの普通に表示されました。IE6では背景画像とフッターのみしか表示されない。という状況です。 CSSは以下です。 /* generated by csscreator.com */ html{ height:100%; } body{ margin:0; padding:0; text-align:center; color: #fff; background: #000000 url("../images/back-right.gif") repeat-x; position: relative; text-decoration: none; height:100%; } body > #pagewidth { height: auto; } img { border-style:none; } ul{ margin:0; padding:0; text-align:left; } li{ list-style-type: none; line-height:100%; } p{ margin:0; padding:0; text-align:right; } #bg_wrap { height: 423px; width: 50%; top: 0px; background: url(../images/back-left.gif) repeat-x; position: absolute; } #pagewidth{ width: 918px; height: 100%; min-height: 100%; text-align:left; margin: 0px auto; position: relative; background: url(../images/left-col.gif) left repeat-y; } #left-container{ width: 130px; height: 100%; float:left; position:relative; padding-left: 23px; } #header{ width: 100%; height: 266px; color: #000; background-color: #fff; } #navigation{ width: 100%; color: #fff; padding-bottom: 5em; } #main-container{ width: 764px; float: right; display:inline; position: relative; } #maincontents{ padding-right: 21px; } #footer{ height: 50px; width: 100%; text-align:left; padding-left: 95px; clear: both; } /* *** Float containers fix: http://www.csscreator.com/attributes/containedfloat.php *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} #twocols, #maincol{width:100%; float:none;} } 以上です、よろしくお願いいたします。
- ベストアンサー
- HTML
- 6で表示がずれて困っています。２つ目です。
6で表示がずれて困っています。２つ目です。 firefoxとIE8ではちゃんと表示されているのに、IE6ではずれてしまいます。 IE6で画像が下にずれて切れ、スクロールバーが表示されてしまいます。 原因とfirefoxとIE8と同じように表示させる方法を教えて下さいm(__)m 画像添付とソースを貼ります。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="testcss.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main"> <div id="header"> <div id="header_line"> </div> <div id="logo"> <img src="A_22.gif" width="142" height="69" /> </div> <div id="cn"> <img src="A_33.gif" width="459" height="158" /> </div> </div> </div> </body> </html> ●css● *{ margin: 0; padding: 0; } img{ border: 0; vertical-align: bottom; } #main{ background: url(images/back_shadow.jpg) repeat-y; margin: 0 auto; width: 820px; height: 300px; } #header{ width: 800px; height: 181px; margin: 0 auto; overflow: auto; } #header_line{ background:url(images/header_1.gif) repeat-x; margin: 0 auto; width: 800px; height: 13px; } #logo{ width: 152px; height: 69px; margin: 10px 0 0 10px; float: left; display: inline; } #cn{ width: 459px; height: 158px; margin:10px 0 0 0; float: left; } 以上です。 初心者でわからない事が多いため、できるだけ詳しく教えて下さい。 宜しくお願いしますm(__)m
- ベストアンサー
- HTML
- CSSでIEとFirefoxでの表示の違い
IE6とFirefox2.0で試しています。 次のように、naviでborderを使うとIE6では普通に表示されるのですが、 Firefoxだと右側にborderのサイズの2倍分くらいはみ出てしまいます・・・ 両方に正常（希望通り）に表示されるようにするには どのような記述にすれば良いのでしょうか？ 「sample.css」 .wrapper { background-color: #ccffcc; margin: auto; width: 600px; height: 100%; } .navi { background-color: #aaffaa; border: 3px solid #ff4500; width: 600px; height: 150px; position: relative; } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="wrapper"> <div class="navi"> </div> </div> </body> </html>
- ベストアンサー
- HTML
- IEとFirefoxでの背景表示の違いについて （CSS）
いつもお世話になっています。 CSSで枠（text_area）を作り、その背景の中央に画像表示させたいと考えています。IEでは中央に表示されるのですが、Firefoxだとtext_areaではなく画面全体の中央に配置してしまい、text_areaには一部欠けた画像が表示されます。 #text_areaに指定した内容を.contentsに書き写しても同じ状態です。 改善策をアドバイスして頂けないでしょうか？ よろしくお願いいたします。 【html】 <body> <div class="contents"> <div id="text_area">あああああ・・・</div> </div> </body> 【css】 .contents{ width:760px; height:540px; margin:0px; margin-right:auto; margin-left:auto; padding:0px; border:0px; } #text_area { overflow:auto; width:600px; height:395px; margin-top:30px; margin-left:auto; margin-right:auto; background-image: url(haikei.gif);/* サイズ：456×392PX */ background-repeat: no-repeat; background-position:center; background-attachment:fixed; }
- ベストアンサー
- CSS
