- ベストアンサー
IE7でズーム変更すると文字と画像・・・
<p>GOO<img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" width="71" height="37" alt="*">Copyright © 2009 Goo All Rights Reserved.</p> 簡単なHTMLとCSSは、ある程度理解しているつもりでしたが IE7でズーム Ctrl++(-)で、拡大縮小すると画像に文字が隠れます。 画像と文字間に１文字程度隙間を開けたいのですが、 スペースや やmarginでもダメなんです(+_+) 何ででしょう？？？ 回避策をお願いします<(_ _)>
- takumana20
- お礼率91% (434/473)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ググりましょうや。 "IE7でズーム変更すると文字と画像"でググったらまんま解決策出てくんのに。 http://hpbuilder.net/ie7_zoom.html * { zoom: normal; } span { zoom: 1; } <p>GOO<img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" width="71" height="37" alt="*"><span>Copyright © 2009 Goo All Rights Reserved.</span></p>
その他の回答 (1)
- cool_
- ベストアンサー率31% (314/1005)
下記しか思いつきませんでした。 参考に <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1"> <tr> <td valign="bottom">GOO</td> <td valign="bottom"><img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" width="71" height="37" alt="*"></td> <td valign="bottom">Copyright © 2009 Goo All Rights Reserved.</td> </tr> </table>
お礼
ありがとうございます。<(_ _)> 色々調べてみましたらどうやらIE7のバグらしいです。 *{ zoom:1; }でいいみたいですけど、わざわざIE7の為に。う～～ん float: で分離させる？、その他の方法があればお願いします。
関連するQ&A
- IE6,7で画像の上に載せた文字がずれる
HTMLなのですが、 画像が縦に3つつながって1つの画像のようになった状態で表示しようとしています。 さらに上と下の画像にはテキストを上にかぶせて表示します。 画像全体にリンクを貼ってあります。 下記のようなコードで作成した所、IE6,7でのみ、下記のバグが出てしまいました。 ・画像とテキストの縦位置のズレ ・画像間に2px程度の空白が生じる ・画像に設定したリンクが開かない 大変困っています。 どなたか原因と修正方法を教えていただけますでしょうか。 <a href="test.html"> <div style="position: relative; width: 183px; height: 265px; "> <img src="images/top.jpg" width="183" height="36" /> <div style="position: absolute; top: -11px; left: 55px;" class="font16b"> <p align="center">text1</p> </div> <img src="images/main.jpg" width="183" height="193" border="0" /> <img src="images/bottom.jpg" width="183" height="36" /> <div style="position: absolute; top: 218px; left: 4px; width: 181px;" class="font13"> <p align="left">text2</p> </div> </div> </a>
- ベストアンサー
- CSS
- CSSで背景画像をウインドウの中心（横方向）に配置する方法？
過去質問したのですが、解決していないのでまた質問させて頂きます。CSSでウインドウの大きさを変えても指定した背景やコンテンツがずっと中心にいさせる方法はありますか？Yahooのような縦長のページにしたいと思っています。いまの段階は760pxの幅でずっと左側にいるようになっています。中心に移動させたいです。以下に参考のためにソースをのせておきます。 --- css --- h1{ margin-top: 0px; margin-bottom: 10px; text-align:center; } p{ text-align:center; margin-top: 0px; margin-bottom: 10px; } body{ margin-top: 0px; } #maincontents{ width:70%; background-image:url(../img/sakanay.jpg); background-position: center; margin-right: auto; margin-left: auto; } --- html --- <body> <div id="maincontents"> <p align="left"><font size="-3">Team X</font></p><br> <h1><img src="img/ten02.jpg"></h1> <p><img src="img/2005g.jpg"></p> <hr> <a>Copyright(c)2006 TX All rights reserved.</a> <p> </p> <br> </div> </body>
- ベストアンサー
- HTML
- 並べた画像ファイルに不要なスペース行が入ってしまいます(HTML付き)。
お世話になります。 下記のように、画像ファイルを２つ並べようと思っています。 +---------+ |隅.bmp | +---------+ +---------+ |隅.bmp | +---------+ ただ、上の画像に左側にスペースを入れると、なぜか２つの画像の 間に細いスペース行が入ってしまいます。 この２つの画像の間のスペース行を無くす方法はありますか？ <p><img border="0" src="隅.bmp" width="160" height="160"><br> <img border="0" src="隅.bmp" width="160" height="160"><br> ↓↓↓ <p> <img border="0" src="隅.bmp" width="160" height="160"><br> <img border="0" src="隅.bmp" width="160" height="160"><br> よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- Firefoxでの画像の縦の隙間をなくしたい
現在Dreamweaver8でサイトを作成中の初心者です。 画像を縦に並べて表示したいのですが、<br>のタグを入れてないところはIE6,7だと隙間なく表示されるのですが、Firefoxだとどうも隙間が出来てしまいます。 ネットや本で自分なりに調べて試したつもりですが、どうにも解決できませんので、お手数ですがどなたかご協力頂けますようよろしくお願いいたします。 参考までにhtmlとcssです。 html部分 <div id="sidenavi"> <p><a href="jjj/index.html"><img src="image/xxx.jpg" width="245" height="79" border="0"></a></p> <p><a href="jjj/index.html"><img src="image/yyy.jpg" width="245" height="79" border="0"></a></p> <br> <p><img src="image/zzz.jpg" width="245" height="40"></p> <p><img src="image/aaa.jpg" width="245" height="80"></p><br> <p><img src="image/aaa.jpg" width="245" height="106"></p> </div> css部分 #contents #sidenavi { padding: 0px; height: 450px; width: 245px; float: right; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; margin-left: 0px; } #sidenavi p { margin-top : 0; margin-bottom : 0; padding-top: 0px; }
- ベストアンサー
- CSS
- ウインドウを狭めてもレイアウトが崩れない方法
ウインドウを狭めてもレイアウトが崩れない方法を教えて下さい。 内容は、一番上にタイトルとしての画像を表示させて、その下に画像を３列で何列ものせる。 ウインドウを大きく広げたときは、それらの画像を中央に表示させてレイアウトを崩さないようにする。 下のような感じでは、ウインドウを狭めると画像が勝手に移動してしまいます。 全てを固定にしたいです。 お手本を教えて頂きたいです。よろしくお願いいたします。 添付画像が理想です。 ウインドウを狭めても画像が固定されている瞬間をイメージ化したものです。 <img src="" border="0" width="300" height="60" /> <br> <br> <br> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>
- ベストアンサー
- HTML
- 画像にリンクを張ると画像がずれるのを解消したいです
ホームページ作成初心者です。 ある個所の画像にリンクを張ると画像がずれて、表示がおかしくなります。 CSSで横幅を設定した中に同じサイズの画像を配置しています。 詳細をご覧いただきアドバイス頂けたら幸いです。よろしくお願いいたします。 html <div id="sidenavi2"> <ul> <li id="midashi2"><img src="image/os_side.jpg" width="200" height="56"></li> <li><a href#">あああ</a></li> <li><a href#">あああ</a></li> <li><a href#">あああ</a></li> <li><a href#">あああ</a></li> </ul> <p><img src="image/message.jpg" width="200" height="65" border="0"></p> <p><img src="../open_service/siryo_seikyu.jpg" width="200" height="62"></p> </div> css #contents #sidenavi2 { padding: 0px; float: right; height: auto; width: 200px; margin-right: 5px; margin-bottom: 0px; margin-left: 0px; } 情報が不足する点があるかもしれませんが、よろしくお願いいたします。
- ベストアンサー
- HTML
- IE８での段落のズレについて
IE７では正常（自分が思うように）に表示してくれますが、 IE８では互換モードにしないと大きなタイトル文字の前に１つ 段落が出来てしまい、２行分のタイトルが４行になってしまい、 タイトル画像からはみ出てしまいます。 （下記の例ですと、「アウトドア」の表示が空白の行の下に来ます。 また、「大好き！」の前にも空白の行があり、文字自体も タイトル画像からずれて表示されてしまいます） 色々チェックしたのですが自分では分からなかったので、どなたか 教えて下さい！ ＜ＣＳＳ＞ body {background-color:#000099;} div#box {width: 680px; margin-left:auto; margin-right:auto; background-color:#ffffff; padding-top:10px;} div#header{background-color: #999999;width:660px;height:290px; background-image: url(./boad.jpg); background-repeat: repeat; margin-right:auto; margin-left:auto; padding-top:10px; } div#header h1 {font-size: 12px; color:#ffffff; padding:0px 10px 0px 10px; font-weight:bold;} div#header h2 {font-size:12px; margin-left:20px; font-weight:bold; color:#ffff00;} div#header h3 {font-size:20px; margin-left:30px; color:#ffffff;} div#header h4 {font-size:4.5em; color:#dddddd; font-weight:bold; margin-left:80px; line-height:100%; } div#header h5 {font-size:4.5em; color:#dddddd; font-weight:bold;margin-left:280px; line-height:100%; } code.main {text-align:left; } .p1 {font-size:15px; color:#333333; } div#footer {width: 680px;margin-top: 50px; } address {font-size: 0.75em; text-align: center; font-style:normal; padding-bottom:20px; color:#cccc00;} <HTML ～head以降> <body> <div id="box"> <div id="header"> <h1> 釣り キャンプ 車 etc </h1> <h2>多趣味な男のこだわり日記</h2> <h4>アウトドア</h4> <h5>大好き！</h5> </div> <p><code class="main p1"> 皆さんはどんな趣味をお持ちですか？<br> 私は沢山の趣味を持っています。<br><br> そのためいくら働いてもお金は溜まりません・・・・・<br> でも、沢山の趣味を自分なりに楽しむのは<br> ステキな事だと思っています。</code></p> <div id="footer"> <address>多趣味研究会, All rights reserved.</address> </div> </div> </body> </html> 宜しくお願い致します。
- ベストアンサー
- HTML
- ウインドウを小さくするとbody上部ボーダが切れる
ブラウザウインドウを小さくし（スクロールバーが表示された状態） スクロールバーを右に動かすと、bodyに設定してあるboder-topのボーダーが途中で切れます。 ウインドウサイズを小さくしてもページ上部のボーダーは常に両端までくる形にしたいです。 ＩＥ８でもFirefox3.6.12でも同じです。 サイトボックスとして、 <div id="site_box"> </div> でサイトＢＯＸは900pxとしており、 ＣＳＳで #site_box{ width: 900px; margin-right: auto; margin-left: auto; } として中央寄せをしています。（body自体はそのまま） ************XHTML************** <body> <div id="site_box"> <div id="header"> <div id="header_msg"><p>ページトップコメント</p></div> <div><img src="img/logo.gif" width="250" height="52" /></div> </div> <div id="main"> <div> <p>テスト</p> <p>テスト</p> <p>テスト</p> <p>テスト</p> </div> </div> <div id="footer"> <div class="copy"><p>Copyright © ******* All Rights Reserved.</p></div> </div> </div> </body> </html> *********ＣＳＳ**************** *{ margin:0px; padding:0px; } body{ border-top-width: 3px; border-top-style: solid; border-top-color: #0066FF; } #site_box{ width: 900px; margin-right: auto; margin-left: auto; } #header{ width: 900px; } #main{ margin-top: 10px; height: 600px; } #footer{ } /*** ヘッダー部 ***/ #header_msg{ text-align: right; margin-top: 10px; } .copy p{ text-align: center; } よろしくお願いします。
- ベストアンサー
- HTML
- IE6にてずれる
こんにちは html超初心者です。 headとcontentsを隙間なく表示したいのですが、IEではコンテンツがずれてしまい うまく表示されません。 コードを記載します。 ================================== --------html------------ <div id="all"> <div id="head"> <h1><a href="../index.html"><img src="img/logo.gif"></a></h1> <div id="guide"> <a href="../index.html">ホーム</a> <a href="index.html">プロフィール</a> <a href="#">リンク</a></div> <p class="clear-both"> </p> </div> <div id="contents"> コンテンツ内容 </div> </div> --------css------------ body,a,div,p,h1,h2,h3,ul,li,img,dl,dd,dt,ol{ margin:0; padding:0; text-decoration: none; } #all{ width:650px; } .clear-both{ font-size:0; height:0px; clear:both; line-height:0%; } #head{ width:650px; background:url('../img/main_img.gif') no-repeat; height:90px; } #guide{ float:right; margin:60px 0px 0px 0px; } #contents{ background:url('../../common/img/back_img.gif') repeat-y ; } ================================== headにてボックスを二つ挿入し、それらをそれぞれfloat：left・rightで左右に表示しています。 その下に<p class="clear-both"> </p> を挿入し、cssにてそのクラスに対し、 clear:both; line-height:0%; 等を入力しています。 IEにて確認すると、その下のコンテンツが 右にずれてしまっています。 line-height:0%;がcssに記載されていなければ ずれずに表示されますが、headとcontentsの間に 隙間ができてしまいます。 line-height:0%を記載していてもfirefox・operaではcontentsはずれず、隙間もありません。 どなたか教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- zoomについて質問です。
zoomについて質問です。 http://www.ikko21.com/ このサイトの中段の画像に、マウスオーバーすると画像が大きく表示されます。 その「マウスオーバーで画像が大きく表示」をやってみたくて ソースを見てみると、 <td width="153" height="120" align="right" valign="middle"> <p class="zoom2"> <a href="#"> <img src="w2img/ww0217031636H21yokoshin.JPG" alt="◇土地貸（事業用定期借地）◇" width="146" border="0"> </a> </p> </td> となっていたので <p class="zoom2"><img src="イメージ"></p> とやると何も変化がなく、 <img src="イメージ" alt="サンプル" style="zoom: 200%;"> とやるともともとの画像が200%で表示されてしまいます。 色々試そうと思い、 <img alt="Sample" onmouseover="this.src='イメージ '; style='zoom: 200% ';" onmouseout="this.src='/イメージ'" src="イメージ" /> や <img alt="Sample" style='zoom: 200% ' onmouseover="this.src='イメージ ';" onmouseout="this.src='/イメージ'" src="イメージ" /> という風にやってみてもダメでした。 （HP制作の勉強を初めてまだ２週間ちょいのへっぽこなのでタグがおかしいかもしれません。勉強不足で申し訳ありません） どうやればマウスオーバーすると画像が大きく表示されるのでしょうか。 よろしくお願いします。
- ベストアンサー
- Java
お礼
同時にググってましたｗ すいません。 でも、zoom: 正規表現じゃないらしいしIE8ではどうなのかな？ もう少し調べてみます。ありがとうございました。
補足
良い案が浮かばないし、大がかりになるようなので 画像を先頭にして回避しました。ありがとうございました。