- 締切済み
文字のいはみ出た部分の処理について
overflowをつかうとはみ出た部分の処理をしてくれるのは分かります。 ですが、ブラウザがIEだと別段overflowを指定しなくても勝手に広げてくれるのでよかったのですが、ブラウザがネットスケープだと指定しなかったらはみ出てしまうし、スクロールをつける事で表示するしかなくなってしまいます。 ネットスケープでもIEのように適切に広げて表示させるにはどのようにしたらいいですか？
- nanaka2222
- お礼率10% (8/76)
- CSS
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞いえIEでちゃんと表示してほしいのではなくてネットスケープではみ出た部分を適切に広がって見えてほしいのです この発想だけは止めてください。そうではなく、ウェブ標準で作成するとすべてのブラウザで期待通りに表示されるのです。そのためには、IEも標準モードで動作するようにDOCTYPEを記述する必要があるのです。 IEがなぜそのようなおかしな挙動をするかと言うと、IEはかってブラウザ戦争と呼ばれた時代に、ブラウザをつけてOSを販売し独自な仕様で他社を蹴落とす作戦を取ったからです。ところが、それでは、ウェブが理想とする「HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )」に反することになり、最終的にMicrosoftも、ウェブ標準に舵を切りなおしたのです。 そのため、ウェブデザイナーを悩ませ続けたブラウザ相互間の表示差がなくなりつつあるのです。 あなたが、ＩＥだとちゃんと見えているというのは、--過去の間違った仕様で作成されたページも見れるようにするための----ＩＥの互換モードでＩＥが動作しているに過ぎないのです。 したがって、あくまでウェブ標準で作成して、ＩＥでのずれがあれば、それを修正するというのが基本中の基本です。なぜなら、ＩＥのウェブ標準への対応がなかなか進まないこと、そして何よりもいまだに古いＩＥが使い続けられていること。マイクロソフトが古いＯＳ(WinXPなど)向けのIE9,IE10を出してこないことが原因なのです。 ですから、もっとも手っ取り早いのは、まずウェブ標準ブラウザ--firefox,Opera,GoogleChrome,safariに合うようにページを作成して、その上でDOCTYPEを「IEで標準モードで表示されるように」記述すれば、解決するはずです。 IEをたくさん使っているのは、中国とか韓国とか日本とかで他の国ではそんなことありません。ドイツ(Germany)なんてfirefox(48.9%),IE(21.9%)です。 Top 5 Browsers in Germany from 1 Nov 2011 to 1 Nov 2012 | StatCounter Global Stats ( http://gs.statcounter.com/#browser-DE-daily-20111101-20121101 ) 具体的な方法はHTMLがわからないとアドバイスのしようがないのですが、基本的にはNo.2に記載した方法になります。
補足
では問題となっている箇所の一部分のソースをかきます。 全部書くと膨大になるので html部分 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ～省略～ <div class="left"> <form> <div class="log_top"></div> <div class="log"> <input type="text" name="id" value="ID" size="20" maxlength="8" /><br /> <input type="passwold" name="pas" value="パスワード" size="20" maxlength="8" /><br /> <input type="image" id="in" name="in" src="image/b_l.png" /> <a id="sin" href="agreement/promise.html"><div class="sin"></div></a> </div> <div class="l_bottom"></div> </form> <div class="l_free_top"></div> <div class="l_free"> <strong>メンテナンス情報</storong><br /> 更新日：<b>たまたま</b> </div> <div class="l_bottom"></div> </div> css部分 /*左画面*/ .left{ width:180px; } /*ログイン*/ .log_top{ margin-top:56px; background-image:url("image/top_log.png"); height:65px; width:170px; } .log{ font-size:14px; height:110px; width:170px; background-image:url("image/line.png"); padding:12px; } .l_bottom{ background-image:url("image/bottom.png"); height:40px; width:170px; } #in{ margin-top:2px; } .sin{ width:116px; height:20px; background-image:url("image/b_s.png") } /*ログインここまで*/ /*左フリー*/ .l_free_top{ background-image:url("image/top_free.png"); height:40px; width:170px; } .l_free{ font-size:14px; height:50px; width:170px; background-image:url("image/line.png"); padding:10px 16px 8px 16px; } .l_guide{ font-size:14px; font-weight:bold; text-align:left; padding:0px 10px 0px 0px; background-image:url("image/line.png"); width:170px; } .l_guide ul{ position:relative; top:12px; } /*左フリーここまで*/ cssは全く手直ししていないものです っすみません今日はそろそろ落ちますので数日後返信させていただきますね
- ORUKA1951
- ベストアンサー率45% (5062/11036)
IEはバグだらけで、それでちゃんと見えるのは当てにしてはなりません。 IEも(ウェブ)標準モードで閲覧すると、同様になるはずです。 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 )を標準モードで起動するように書けば、IE8移行はfirefoxなどの標準ブラウザと同様になるはずです。 IEのバージョンやHTMLとCSSが書かれていないのでわかりませんが、高さ(height)ないし、はば(width)が指定されている場合、内容がそれより多い場合ははみ出して表示される(view)が本来の動作です。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから Initial: visible visible 内容を切り抜かない。 すなわちブロックボックスの外側にもレンダリングされる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［その他の視覚効果( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visufx.html#overflow )］より IEの国内シェアが5割を切った( http://lhsp.s206.xrea.com/misc/browser-share-version.html )とはいえ無視するわけにはいきませんし、今後のウェブページは標準モードで作成することになります。(HTML5は必ず標準モード) また、視覚障害者などがフォントサイズを大きくすると崩れてしまうようでは、ウェブページとはいえません。 高さやはばの指定を、min-height,min-heightで指定すると良いでしょう。 div.section{min-height:400px;} だと最小で400px確保して、内容が増えれば伸びます。 あるいは、 div.section{height:auto;} でも・・
補足
いえIEでちゃんと表示してほしいのではなくてネットスケープではみ出た部分を適切に広がって見えてほしいのです（IEで見えるのと同様に） ネットスケープはバージョン７．０です さすがに拡大して見てもらうというのは私の想定外です 指摘していただいたのですがさすがにそこまでこだわる必要性を感じません すっごく意外なのですがIEはパソコンを買うと標準でついてくると思ったのですが、それでシェアが５割を切るとかがすっごく意外ですね 私個人としてはとしてはIEすっごく使いやすいですし慣れてます そもそもIEがバグだらけといわれましてもIEのバグなんて今までバグだと思えるようなバグは遭遇した事がないのですがどこら辺にバグがあるの？ といった感じですね
- e_16
- ベストアンサー率19% (847/4388)
ネスケなんて使用ユーザーが少ないから対処しないほーが身のためだよ 対処すると、他のブラウザで崩れるから(^_^;
補足
少々事情がありましてそういうわけにも行かないのですよ 長くはなりますが現在パソコンが全て壊れてましてこのパソコンは画面が真っ暗だけどネットはできる 別のパソコンはネットはできないけど画面が普通に表示される（真っ暗ではない） そのため別のパソコンでできばえを確認しているのですがこれが普通のhtmlやcss でできたHPを作るのならブラウザIEでいいのですが私が作ろうとしているのはCGIでして、ネットを使う環境が整っていなければIEではCGIが動作しているのか確認ができないのです そのためネットスケープをしようする（インターネットにつながなくてもCGIの動作が確認可能）事になるのですがIEではちゃんと表示されていたものがネットスケープだと表示がおかしくなりまして、少しだけ手直ししないとできてるのかわからないのです （paddingを使うと手直し、文字がはみ出る、他にも数箇所手直し部分がありそう） そのためネットスケープでもちゃんと表示されるようにしたいのです。 それにネットスケープでも対応可能なページにすればより見ていただけるユーザーが増える可能性がありますしね（CGIを使うと可能っぽい） こんな事を書くとパソコンを買うか修理しろと言われるかもしれませんがちょっと今は難しい状況でして...
補足
教えていただいた方法を試したのですが全く直っていません。 っと言うよりも表示され方が以前よりもおかしくなりました。 確かにどのブラウザでも同じように見えるようになるのは魅力的かもしれませんが、自分がこのように見えるようにしたいと思って、見せれないのは問題だと思います。 そもそも ＜＜これでIEでも、他のブラウザと同じような表示になるはずです。 このように言われますが私は何度も言うようにIEで見たいのではなくネットスケープで見たいのです。 一番問題となっていた、はみ出た部分を自動拡大されて見えるように