*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

Top Page › Template › テンプレ修正等 › ct_responsive の修正・更新致しました。(for IE)
2019-01-31 (Thu)  03:39

ct_responsive の修正・更新致しました。(for IE)

テンプレート『ct_responsive』をご利用頂き、誠に有難うございます。m(__)m
1月28日の記事、トップページ要約表示方法を変更した修正・更新について、この修正をした際、IE(InternetExplorer)及び古いブラウザ(Firefox35, Opera12.15, Safari5.1.7)で、トップページ要約表示時の記事画像が無い場合に空のスペースが出来てしまう不具合を見付けました。
原因は「枠内に画像を綺麗に収めるための css "object-fit"プロパティ」が効かないIEやEdgeに 対応させるために入れた『object-fit-images』ライブラリ。

ofi-ie1
↑クリックで大きく表示

この『object-fit-images』は、記事内の画像や指定したアイキャッチ画像などを"object-fit"プロパティが使えないIEやEdgeで表示するために、そのままimgとしてではなく実質style属性のbackground関連プロパティで表示させるよう書き換えているようです。
そのため、ダミー画像をsrcで指定する先般の方法では非表示にならず、『object-fit-images』によってダミー画像が背景として表示されてしまう事になります。
なので、背景になった特定画像を非表示にするスタイルを追記しました。

28日に修正・更新したCSS
.left img{
width:100%;
height:auto;
max-height:140px;
object-fit:cover;
font-family:'object-fit:cover;'; /*IE対策*/
border:1px solid #ddd;
}
.left img[src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"]{
display:none; /* 要約表示時に画像が無い場合ダミー画像を非表示 */
}


30日に修正・更新したCSS
.left img{
width:100%;
height:auto;
max-height:140px;

-o-object-fit: cover; /* 古いopera用ベンダー */
font-family:'object-fit:cover;'; /* IE対策 */
object-fit:cover;
border:1px solid #ddd;
vertical-align:middle;
}
.left img[src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"]
,
.left img[style*="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"]
{
display:none; /* 要約表示時に画像が無い場合ダミー画像を非表示 */
}


赤い文字部分を追記する事により、IEでも意図した表示にする事ができました。
(.left img[src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"], の末尾に有るカンマ( , )を忘れずに。)

ofi-ie2

確認ブラウザ
PC表示
Firefox35, Opera12.15, Safari5.1.7, IE11, MS EdgeHTML17, GoogleChrome72.0
SP表示
android8.0 Chrome, iOS12.1.3 Safari Chrome

新しいブラウザでは問題無いようですが、IE、Edge、古いブラウザをご利用で表示に不具合が有りましたら、1月28日の記事と併せて上記の箇所を追記下さいませ。
例え減ったとは言え まだまだ利用者がいる IE(InternetExplorer)、出来るだけ新しいバージョンには対応しておきたいと思いますので、お手数ですが宜しくお願い致します。m(__)m

Comment




ご質問,不具合は確認用にURLをお願いします。




管理者にだけ表示を許可