CSS3+HTML5

clipプロパティでのサムネイル表示が、表示されなくなった。

2014年7月24日  

CSSで、画像を切り抜いて表示させるのに、clipプロパティというのがあり、
wordpressならプラグインで対応出来ますが、
そうでないサイトの場合は、ブログの新着記事にサムネイルをつける際、clipプロパティを使ってました。

ところが、7月20日頃から、表示されなくなり、理由がわからなく困ってました。

普段使用しているブラウザは、Google Chromeで、Safariでは問題なく表示されています。

他のも調べると、Firefox、IE10も表示されていません。

設定は、検索すれば出てくるものと同じで、

.sampleBox {
position: relative;
height: 80px;
}
.sampleImg {
position: absolute;
height: 80px;
clip: rect(0, 80px, 80px, 0);
}

のような感じです。

どのサイトを見ても、
clipプロパティでの指定は、positionプロパティで[absolute]か[fixed]が指定されている場合に有効。となっていて、
親要素には、position: relative; を設定していました。

が、これがいらなかったようです。

他の部分で使用している position: relative; が影響しているのかもしれませんが、

親要素の position: relative; を削除したら、
Google Chromeで、Safari、Firefox、IE10も表示されるようになりました。