サーバーにアップロードすると一部のcssが崩れるのを防ぎたい

Question

###前提・実現したいこと
html,css初心者です。
ローカルでは正常に表示されているのに、サーバーにアップロードしてchrome（ネット上で）開くと一部のcssが反映されません。
正常に表示させたいです。

###発生している問題
ネット上でchromeで開いたときのみ、一部のｃｓｓが反映されません。
具体的には、hover時のopacityと、opacityを使った画像の切り替えが反映されません。
その他ｃｓｓは正常に反映されています。

また、ローカル環境のchromeでは表示されます。
サーバーにアップロードしたネット上であっても、ＩＥでは正常に表示されます。

###補足情報

原因がわからず困っています。
わかりにくい説明で申し訳ありませんが、解決策、または原因と思われるものを教えていただけると助かります。
よろしくお願い致します。

Answer 1

ブラウザにはキャッシュ機能があります。
キャッシュの消去を行ってみてはいかがでしょうか？
Chromeの場合は以下のように行えると思います。

1. Google Chrome を開きます。
2. ブラウザのツールバーにある その他 アイコンをクリックします。
3. [その他のツール] にカーソルを合わせ、[閲覧履歴を消去] をクリックします。
4. [閲覧履歴データを消去する] ボックスで、[Cookie などのサイトデータやプラグイン データ] と [キャッシュされた画像とファイル] のチェックボックスをオンにします。
5. 画面上部のメニューでは、データを消去する期間を指定できます。すべて削除するには [始めから] を選択します。
6. [閲覧履歴データを消去する] をクリックします。

Comments

[ren_123]

キャッシュを消すことで解決しました！
助かりました。皆さんご回答ありがとうございます。

Answer 2

考えられる原因は2つですね。

1つはアップロードされていない。
サーバー上で変更されているか確認してください。ファイル転送ソフトにより時間がずれているなどが原因で上書きされていない可能性があります。

2つめはキャッシュが残っている
windows-chromeならばページを開いて

1. F12を押し「Developer Tool」を表示
2. 「Developer Tool」を表示を表示した状態でF1を押し「Settings」を表示
3. NetworkのDisable cache (while DevTools is open)にチェックを入れる
4. ページの再ロード

で行けると思います。

Answer 3

cssファイルがブラウザにキャッシュされてしまっていることが原因ではないでしょうか。
もしキャッシュが原因であるとするとhtmlファイルのcssを読み込んでいる記述にクエリーを追加してみたら更新されるかもしれません。

<link rel="stylesheet" href="style.css?update=20170304" type="text/css">