hoverの場合、画像の明るさを調整したいので、いつものようにcssを書きました。
|
1 | opacity:0.6; |
今回はIE8、FF、Safariを対応しないといけないので、
それぞれのブラウザを対応するcssを追加して、確認したところIE8ではうまくいかなかった。
|
1 2 3 4 | filter: alpha(opacity=60); /* ie lt 8 */ -ms-filter: "alpha(opacity=60)"; /* ie 8 */ -moz-opacity:0.6; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.6; /* Safari 1.x */ |
対策方法を検索した結果を
|
1 | zoom:1; |
を追加したら、早速うまくいったので、
安心して、本番にアップしたら、本番環境ではうまくいっていない！
cssのパスが違っているか何度も確認しても、テスト環境との違いが見つからない！
それで、cssを変えようとして、また検索したところ、
場合によって、「a」タグの幅と「display: block;」を指定しないといけないみたいです。
試してみたら本番環境もうまくいくようになりました。
cssも同じブラウザでも環境によって、動作がちがうって初めての体験でした。
