• 締切済み

Operaでの表示がおかしい(CSSハック)

あるサイトをWebデザインしているのですが、F5キーを押せばOperaでの表示がおかしくなります。 色々CSSファイルとかを自分なりに見て解決法を試行錯誤したのですが、自力では限界になって投稿させて頂きました。 ■ 問題の内容 ・ 表示がおかしいブラウザはOperaに特定される。 ・ 環境はHTML5・CSS(外部ファイル)・JQuery(外部ファイル) ・ Operaで最初に表示させた時はローカル・Webとも通常表示されるが、そのサイトをF5(更新)キーで押した時、サーバーアップ時のみレイアウトが崩れる(ローカル(Windows)上の同ファイルをOperaで開いた時及びF5キーを押した場合は、両方とも表示崩れが起きない)。 ・ レイアウト崩れは特定の部分のみ。 ・ お客様のサイト、自社でテストでアップしたサイトの両方のサーバー(別会社)とも全く同じ現象が起きる。 ・ 通常表示時に別サイトに行き、リンクや戻るボタンで戻った時は、上記崩れは起きていない。 ・ Opera以外のブラウザ(試しているのはOperaのほか、IE・Firefox・Chome・Safari)では上記現象は一切発生しない。 通常のOperaのCSSハックをすれば解決するっていう感じでは無さそうですし。 解決策は何かありませんでしょうか。 よろしくお願いいたします。

  • HTML
  • 回答数1
  • ありがとう数1

みんなの回答

回答No.1

私なら崩れている周囲のプロパティを見直します。 marginで指定しているところをpaddingにしてみたりだとか、場合によっては無意味なposition:relative;を追加したりだとか、代替&追加する方向で直しますね。 場合によってはレイアウトに関わるプロパティも代替します。floatをinline-blockでやったり。 キャッシュさせない方向でも良いんですが、汎用性下がりますし。

cheery_express
質問者

お礼

うーん。その辺りも見直してはいるんですけどね。 レイアウトに変わるプロパティの代替も検討してみます。ありがとうございました。

関連するQ&A

  • CSSハックの使い方を教えてください

    CSSでサイトを作っているのですが、フッターとメインのwrapperの間を開けるのに、どうしてもすべてのブラウザで共通のCSSではできません・・・かなり格闘したのですが・・・ そこで、この際CSSハックを使おうと思っています。 といっても、よくわかってないのですが、CSSハックを使えば、IE6にはこの指定、IE7にはこの指定、Firefoxにはこの指定、opera、safari・・・ など個別のブラウザに異なったCSSを指定することができるのでしょうか? 実際の記述方法を教えていただけないでしょうか? 「firefoxとopera」にはwrpperにmargin-bottomをかけて、IE6,7にはfooterにmargin-topをかけて解決しようと思うのですが・・・ ちなみに、この現象のほかの解決方法ってあるのでしょうか? #wrapper{ position:relative; width:870px; margin:0px auto; text-align:left; } #foot{ position:relative; width:100%; height:auto; clear:both; }

    • ベストアンサー
    • HTML
  • CSSハックについて・・・

    ホームページを作っていて、IEではちゃんと表示されるのですが、 FirefoxとOperaでは思い通りに表示されません。 これをどうにかしたいと思います。 前に、どこかのサイトでCSSハックという言葉を見たことがあるのですが、主にFirefoxに、CSSハックを利用したいです。 Firefoxのみ、またはFirefoxを含む様々なCSSハックの方法を教えてください! 今は、OperaよりもFirefoxを優先してほしいです。

    • ベストアンサー
    • HTML
  • Operaをお使いの方にお聞きします。

    外部CSSを使ったWebページを作っています。 5~6種類のブラウザで表示確認を行なっているのですが Opera(7.23で確認)だけが変な挙動を見せます。 例えば、ページを開くと微妙に意図どおりの表示にならず がく然としてリロードすると、意図どおりに変わります。 つまり、意図する表示にするためには、 開いた後、リロードが必要なわけです。 また、何十回と連続してリロードを繰り返すと 10回に1度ぐらいの割合で、CSSで指定している 背景画像が読み込まれなかったり、見るも無残に レイアウトがくずれたりします。 これは私のCSS指定がまずいのか、Operaが悪いのかが 分からずに困っています。 Operaを長くお使いの方、ほかのサイトで このような現象が起こったということは ありますでしょうか? 原因切り分けの情報・経験談をいただきたく、 よろしくお願いいたします。

  • cssの今、一番旬なブラウザごとに違うcssをかける方法

    現在4つのブラウザでほぼ同じような動作・見栄えをするサイトを制作しております。 4つのブラウザとは(opera ie6 ie7 firefox)です。 そこで、現在、ie6だけで生じる表示崩れがあり、 そのcssの解決方法も発見したのですが、 それを解決すると今度は逆に、opera,ie7,firefoxでエラーが起きてしまいます。 読み込んでいるのは、一つの外部cssファイル、main.cssです。 現在考えられる解決方法としては、 1.ie6だけにcssを掛けるハック?  この場合、どのようにハックをかければいいのでしょうか。  色々しらべましたが、スターハックなど、現在使って良いハックというのは何になるのでしょうか。 具体的なcssコードは、以下です。 #pull a:hover{ display:block; /*以下ie6だけに指示したい命令 現状コメントアウトしています*/ /*margin-bottom:-20px;*/ } 2.ie6だけ別の外部cssファイルを読み込ませる。  ブラウザ毎に違うcssファイルを読み込ませることってできるのでしょうか。  (javascriptで判別するのでしょうか?) ie6 なら、main_ie6.cssを読み込み、 それ以外のブラウザなら main.cssを読み込ませる 一番ベストな方法を教えていただければと思います。

    • ベストアンサー
    • HTML
  • 外部CSSファイルをHPに訪問する度に自動で読み込ませたいんですが...

    cssを学んで日の浅い初学者です。 cssを外部ファイルにして読み込ませているのですが、css、htmlファイルをそれぞれ更新してブラウザで表示させると、htmlの更新は反映されるんですがcssの更新は反映されないんです。 そこでF5(またはブラウザの更新ボタン)を押してやっと更新されたcssが読み込まれるんですが、これを自動でやる方法はありますでしょうか? 自動でcssファイルをリロード(サイト訪問時1度だけ)するソースはあるのでしょうか? サイトを更新するたびにレイアウトが崩れ、困っています。。 自分はリロードを手動でやり、思ったとおりの表示にできるのですが、何もしらない訪問者は手動でのリロードはやらないと思うので、古いcssファイルのままだと思うんです。。 どうかご教授願います。

  • NNだけCSSのリンクが切れる?!

    <link href="common/top.css" rel="stylesheet" type="text/css"> 上記のようなソースで外部ファイルにリンクしてるのですが、 サーバにあげたときだけNNで見るとCSSが適用されません。(IEでは表示されます) ローカルでみれば、IEでもNNでも問題なく表示されるし、 外部ファイルをやめて、HTML内にCSSを記述すればサーバにあげても表示されます。 サーバ側に原因があるのか、ソースコードで解決できるのか どなたかこの現象の解決方法を教えて下さい!!

  • IEだけ外部CSSを読み込まない

    こんばんは。 レスポンシブサイトを製作中なのですがIEだけが外部CSSを読み込みません。 Chrome、Firefox、Opera、Safariなどのモダンブラウザは異常なく読み込みます。 IEに限ってどのバージョン(少なくとも8~11)もCSSを読み込まずHTMLだけのレイアウトです。 考えられる原因は何だと思われますでしょうか? モノをあげられないので推測での話になると思うのですが、よろしくお願い致します。

    • 締切済み
    • CSS
  • CSSでテーブルのように画像を均等表示させるには?

    お世話になります。CSS初心者です。 もしかしたらweb制作者様にとっては簡単なことかもしれませんが、いろいろ調べてもよく理解できなかったので、どうか教えてください。 添付画像のようなレイアウトでサイト制作しています。 このように#rightbox内に10の画像を均等に表示させたいと思っています。 かつてテーブルタグといったものが使われていましたが、現在テーブルは推奨できないということで、外部CSSファイルでレイアウト表示させたいと考えています。 このようなレイアウトで表示させる場合、どのようなCSSの記述が好ましいでしょうか。 参考書などで調べたところ<ul>と<li>要素を使用するのが一般的だということでしたが、正直よく分かりませんでした。どうかご教授お願いします。 ちなみにこの画像のリストはクリックするとThickboxで大きな画像が表示されるようにしたいです。

    • ベストアンサー
    • HTML
  • OPERAでのCSS利用

    個人ホームページを運営している者です。HTMLやCSS、Javascript、CGIなどについてひととおりの知識は持っています。 質問ですが別ファイルで用意したCSSを利用するホームページ作成し、表示具合をwindows版のIEおよびNetscapeで確認して何ら問題ないのにOPERAで見るとCSSが効いていないのですがこれはOPERA特有の性質によるものですか?そして正常にCSSを効かせるためにはどうしたらよいのでしょうか?よろしくお教えください。

  • CSSのことで教えてください

    HTML+CSSでHPを作りました。 CSSは外部フォルダに入れて、HTMLからリンクさせてます。 そして問題なく表示されるのですが、CSSの読み込みが遅いため、HPデザインがバラバラになってしまいます。(CSSを読み込まない状況となりますが、F5キーでリロードさせると解決します) この遅延を解決する方法はありませんか? 補足ですが、CSSは2KBで、HPは6KBです。そしてグーグルクロームやファイヤーフォックスでも同じ状況となります。サーバーはすこぶる快適な環境です。(レンサバ) よろしくお願いします。

専門家に質問してみよう