- 締切済み
急にＩＥのＣＳＳバグが発生？
自分のサイトを公開しているのですが、急にファイルをいじったわけでもないのに、一部cssの命令が無視？されてしまうようになりました。 起こったのは今日で、Firefoxでは表示が正しいことから、ＩＥのみなんらか要因で急に表示がおかしくなったようです。 表示がおかしくなった箇所は、現在確認できるかぎり、 ・boder-top-left(light)の角丸が角にもどっている。 ・ツイートボタン、ハテナブックマーク、フェイスブックのボタンが横1列にしてあるはずなのに、改行されてしまっている。 の2点です。 他のcssの命令は通常通り適応されています。 この原因は何でしょうか。 またこのような、急にバグ？が起こることはよくあるのでしょうか。 回答よろしくお願いします。
- sorakana
- お礼率63% (99/155)
- ブラウザ
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- piraippi
- ベストアンサー率27% (47/168)
IEをアップデート（バージョンアップ）していないですよね？ マイクロソフトのセキュリティアップデートとかで思わずバージョンアップしちゃったとかないですよね？
関連するQ&A
- Win IE6・7でのみ、CSSがうまく機能していないような不具合
こんにちは。 文字の装飾を施したCSSがあり、SafariやFireFoxなどのブラウザでは綺麗に表示されているのですが、Win IE6・7では表示が乱れてしまいます。しかも、同一ページ内の一部分ではCSSが生きていて、一方の一部分ではCSSが適応されずに表示されてしまいます。 考えられる互換モード関係やCSSの確認・再設定、IEの再起動やPCそのものの再起動など試しましたが、解決にいたりません・・・。 IE以外では綺麗に表示されてるということは、IEにあるたくさんバグの内の何らかが原因だと思うのですが、見当つく方いらっしゃいますでしょうか？ どうぞよろしくお願いいたします。
- 締切済み
- HTML
- IE9でCSS3を適応させると動作がおかしい
よくある普通のチャット(PHP)のデザインを変更して使おうと思っています。 [ 入力欄 ] [発言] [退室] チャットの入室画面でフォームの配置がこのようになっており、 入力欄にメッセージを書いてエンターを押すと送信され下部に表示されます。 大抵どのチャットでもエンターを押すとカーソルは入力フォームにとどまり、 そのまま続けて入力→エンターで発言ができます。 Google ChromeとFirefoxでは問題ないのですが、 IE9のみエンターを押した後に続けて入力することができません。 エンターを押すとなぜかtabキーを押した時と同じような状態になり、 隣の発言ボタンがマーキング？されてしまいます。 なので、エンターを押した後にいちいち入力フォームにマウスを持っていってクリックしないと次が入力できません。 原因を調べてみると、どうもCSS3と関係があるようだということが分かりました。 IE9でCSS3の記述（例えば画像などの角丸やボックス内の背景のみを透過するなど）を使うには、 <meta http-equiv="X-UA-Compatible" content="IE=9" /> 上の記述を<head>内に入れないといけないようなのですが、 これを書いてCSS3を適応させると上記の問題が起こり、 書かない場合はエンターを押して送信した後、そのまま入力フォームにカーソルがとどまってくれます。 どうしても他のページやブラウザと概観を統一したいのでCSS3をIE9にも適応させたいです。 フォームの挙動とCSSは関係ないような気がするんですが、どうしてこういうことが起こるんでしょう？ また、対策などお分かりになる方がいればよろしくお願いします。
- ベストアンサー
- CSS
- ieでのみCSSのcontentが効かない
Wordpressでサイトを製作中です。 http://www.warna.info/archives/1310/comment-page-1/#comment-14459 ↑のサイトのパンくずナビを使用しておりますが、IEでのみ前のページの表示【＞】が効かず、表示されません。他のブラウザは大丈夫でした。 ちなみに、 content: ">"; のCSS記述を background-image:""; にして【＞】の画像を入れてもダメでした。 何でもいいので、前のコンテンツに【＞】を入れられる命令を教えていただけませんか。 ―――――――――――――― 現在のパンくずの状況 home contentsA contentsB どういう表示にしたいか home > contentsA > contentsB ―――――――――――――― CSSはコチラです↓ #bread-crumb { font-size: 95%; padding: 1px 0 10px; } #bread-crumb ul { margin: 0; } #bread-crumb ul:after { clear: both; content: ” “; display: block; font-size: 0; height: 0; visibility: hidden; } #bread-crumb li { float: left; } #bread-crumb li.sub { padding-left: 10px; } #bread-crumb li.sub:before { letter-spacing: 10px; content: “>”; }
- 締切済み
- CSS
- Dreamweaver CS3で、一部のCSSが適応されません
divの大枠の#contentの中に、小枠の、上の帯に#header、左に#menu、右に#main、下の帯に#footerを作りました。 ごくごく一般的なCSSスタイルで、難しい事はしてないと思います。 Windowsですが、Dreamweaver CS3で作成画面での表示は大丈夫なのに、 なぜかInternet Explorer6.0で、 この、「右に#main、下の帯に#footer」の、CSSスタイルが適応されません。 FireFoxでの表示は、大丈夫です。 IEのみの様です。 原因が全く解らず困っております。 こういったバグは報告されてますでしょうか？ ・Internet Explorer 6.0のバグでしょうか？ ・Dreamweaver CS3のバグでしょうか？ ・もしかして、XHTML 1.0 Transitionalとか、HTML 4.01 Transitionalが関係しているのでしょうか？ ・CSSは1枚の外部CSSファイルからリンクしてますが、あまりファイル1枚に長すぎるとダメなのでしょうか？ ・テンプレートは使ってるページや、使ってないページも同じ現象があるのですが、 テンプレートを使ってるページの方が、バグが多い様な気もします。 例えば、テンプレートと、CSSの相性の問題もあるのでしょうか？ ・それとも、私のCSSの組み方か何かに問題があるのでしょうか？ 数日作業が止まっており、困っております。 どうぞ宜しくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- ボタンのコード ｃｓｓ記述バグ？
以下のボタンのコードに関してですが、ブラウザー上でマウスのポインターをボタンの上におくと、上のボタンと下のボタンとの距離が狭くなりボタンとボタンがくっついてしまいます。 本当は、マウスのポインターをボタンの上におくとボタンの距離を一定に保ちボーダーの幅だけかえたいのですが、どうすればよいでしょうか？ 多分、以下のコードにバグがあると思うのですが、分かりません。 どなたか、お分かりの方がおられましたら、教えて下さい。 よろしくお願いします。 キャサリン 以下コード <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- .test a { display:block; text-decoration:none; background-color:#00FF00; color:#000000; font-size:12px; margin-top:0px; margin-bottom:20px; padding-top:10px; padding-bottom:10px; padding-left:5px; border-top:solid 2px #000000; border-bottom:solid 5px #000000; border-left:solid 2px #000000; border-right:solid 5px #000000; width:600px; } .test a:hover { border-top:solid 5px #000000; border-bottom:solid 2px #000000; border-left:solid 5px #000000; border-right:solid 2px #000000; } --> </style> </head> <body> <div class="test"> <a href="index.html">あいうえおかきくけこたちつてと</a> </div> <div class="test"> <a href="index.html">あいうえおかきくけこたちつてと</a> </div> <div class="test"> <a href="index.html">あいうえおかきくけこたちつてと</a> </div> </body> </html>
- ベストアンサー
- HTML
- CSSでの中央揃え
CSSでの中央揃え googleで表示させる為にCSSでページレイアウトとしているのですが、ページ全体（云わばbody）が左寄りのままであり、画面中央に配置することができません。 様々な質問を見ていると「text-align:center」はIEのバグでIEでしか表示されないとの事で・・・ マージンを変更し、左から右のみに動かしていましたがそれではウィンドウを縮小させたときに右側のマージンを変えていないので、間隔のあいた左側が出てしまいスクロールするはめになります（しかも右側はピッタリレイアウト面がウインドウ端についている） 右側のマージンの値も変更はしてみましたが、左側のようにいかずに命令自体スルーされます width:700px; margin-right:auto; margin-left:auto; } ↑コレとか 説明があやふやすぎて分かりにくい事は謝罪しますが、心当たりがある方がいましたらご教授お願いします
- 締切済み
- CSS
- CSSでアイコンを付けるとWin IE6でのみおかしくなってしまいます
下記のCSSコードでh2を装飾しています。 h2が長くなって改行が入った場合、Win IE6でのみ表示がおかしくなってしまいます。 「h2 a」に「float: left;」を追加してやるといちよう解決出来たのですが、もっと良い方法はないでしょうか。 よろしくお願い致します。 <html> <style type="text/css"> h2{ margin-bottom: 10px; padding: 2px 5px 2px 21px; color: inherit; background: #E6E6E6 url(images/icon_h2.gif) 5px 0.5em no-repeat; } h2 a{ padding-right: 23px; background: url(images/icon_link1.gif) right center no-repeat; height: 1%; } </style> </head> <body> <h2><a href="#">あああああああああああああああああああああああああああ</a></h2> </body> </html>
- 締切済み
- HTML
- XHTML+CSSにおいてIE6での原因不明のバグ？に困っています
最近一大決心をし、テーブルでデザインしていたページをCSSでデザインしなおしております。 今IE6にでのみ、おかしな挙動が起こっていて昨日からもう5時間近く直せないでいます。どなたか原因と対処方を教えていただけませんでしょうか？ やりたいこと：枠の中に2段組で左にサイドバー、右にメインの要素を入れようとしています。メインの要素はブログでいうエントリーのように似たような要素が繰り返されます。 事象：IE6でのみエントリーの繰り返しの最後の要素が通常の表示とは別に全体の背景のように表示される。 該当部のソース：一応コメント部もそのまま載せます （XHTML） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <title>あいうえお</title> <style type="text/css"> @import url("xxxxxx.css"); </style> </head> <body> <div id="box"> <div id="centerbox"><!-- 角丸コンテナセンター要素（コンテンツ部） --> <div id="contents"> <!-- ここからコンテンツ ---> <!-- ここからサイドコンテナ --> <div id="side"> <div class="subnavi"> <h2>さいどなび</h2> <p>サイドナビ要素</p> </div><!-- / end of subnavi--> <!-- / サイドコンテナここまで --> </div><!-- / end of side--> <!-- ここからメインコンテナ --> <div id="main"> <h2>コンテンツタイトル</h2> <div class="column"> <h3>コンテンツサブタイトル</h3> <p>コンテンツはここはひふへほ書きくけ子たち</p> <p>コンテンツはここはひふへほ書きくけ子たちつ</p> </div><!-- / end of column--> <div class="column"> <h3>コンテンツサブタイトル２</h3> <p>ここは繰り返しのてすと</p> <p>コンテンツはここはひふへほ書きくけ子たちつて</p> </div><!-- / end of column--> <!-- / ここまでメインコンテナ---> </div><!-- / end of main--> <!-- /ここまでコンテンツ --> </div><!-- / end of contents--> <!-- ここまで角丸コンテナセンター要素 --> </div><!-- end of centerbox --> </div> <!-- / end of box--> </body> （CSS） #box { width: 800px; margin: 0px; padding: 0px; height: auto; clear: both; } #box #centerbox { vertical-align:top; margin: 0px; padding: 0px; clear: both; width: 790px; border-right: 5px solid #990000; border-left: 5px solid #990000; height: auto; border-top-width: 0px; border-bottom-width: 0px; } #contents { margin: 0px 5px 5px; padding: 0px; height: 500px; width: 780px; clear: both; } #contents #side { height: auto; width: 150px; margin: 0px; padding: 0px; float: left; } #contents #side .subnavi { border: thin dotted #00FFFF; margin: 0px; padding: 0px; } #contents #side .subnavi h2 { color: #CC0000; background: #FF66FF; padding: 5px; margin: 0px; font-size: large; } #contents #main { padding: 0px; float: right; height: auto; width: 630px; margin: 0px; } #contents #main h2 { background: #66CCFF; border-left: 10px solid #0000FF; margin: 0px 10px 10px; font-size: x-large; font-weight: bold; padding: 5px 10px; } #contents #main .column { margin: 15px; padding: 10px; border: thin dashed #0000FF; clear: both; } #contents #main .column h3 { background: #99FFFF; border-left: 10px solid #0066FF; margin: 0px; font-size: large; font-weight: bold; padding: 5px; } #contents #main .column p { font-size: medium; clear: both; margin: 5px; padding: 0px; } 縦は一番上から始まり、横は上記HTML<p>サイドナビ要素</p>のサとイの間辺りからcolumn の最後の要素が背景のように出ます。文字は最後の1文字しか見えません。（おそらくその上に他の要素があるため見えないのではないかと思いますが・・・） おそらくCSSに問題があると思うのですが、全く解らないです。
- ベストアンサー
- HTML
- CSSレイアウトの回り込みについて
初めまして、よろしくお願いいたします。 見よう見まねでCSSレイアウトのweb制作に挑戦している者です。以下の現象についてご指南いただければ大変助かります。 ■CSS #wrapper { width : 620px; } #left { width : 300px; float : left; } #right { width : 300px; float : right; } ■ソース <div id="wrapper"> <div id="left"> （左寄せブロック） </div> <div id="right"> （右寄せブロック） </div> </div> 上記のCSSとソースで「620px幅の外枠」の中に「300px幅の左寄せブロック」「300px幅の右寄せブロック」が中央に20pxの隙間を空けて正常に表示されるのですが、右寄せブロックの中に長いテキストを改行せずに書いたら右寄せブロックが右寄せにならず、左寄せブロックの下に落ちて表示されてしまいます。 この現象は、長いテキストが300px幅に指定されている右寄せブロックの幅を押し広げている？から起こるのでしょうか。 右寄せブロックの中に長いテキストを書く場合、いちいち300px幅を意識して自分で改行を入れなくても、300pxの右寄せブロック幅を押し広げることなく自動折り返しされれば良いのですが。（右寄せブロックの高さは指定していないので） また、文字のサイズはpxで固定できない事情があるので、ブラウザで可変できるパーセント指定にしているのですが、ブラウザの文字サイズ中では正常に右寄せされている右寄せブロックが、文字サイズ大に変更したとたんに左寄せブロックの下に落ちてしまいます。 右寄せブロックの中に長いテキストを改行なしで書いても右寄せブロックが左寄せブロックの下に落ちて表示されない様、どなたかご指南いただければ誠に幸いです。
- ベストアンサー
- ホームページ作成ソフト
- FIrefoxのuserChrome.cssでの記述方法
userChrome.cssでロケーションバーにデフォルトである「お気に入り追加ボタン（star-button）」を消して 替わりにはてなブックマークのお気に入り追加ボタン（hBookmarkAddButton、デフォルトではステータスバーにある）を 表示したいのですがどのように記述すればよいのでしょうか？ star-buttonを消すところまでは出来たのですが、hBookmarkAddButtonを移動させる方法がわかりません よろしくお願いします
- 締切済み
- ブラウザ
補足
特に操作は行っていないと思います。 書き忘れましたが、バージョンは９です。