IEでの表示でおかしな影が・・・。CSSに書き込んで使える「zoom:1」

先程【【blogger】見出しにスタイルを付けたい！付箋風スタイルとクレヨンっぽいのを設定してみた。 | sunabox】(Click New Tab)のように、設定をしながら、さすがにIEでの表示を確認しようと思って見てみたら、なんだか変なことに・・・

画像の左下ですが、「続きを読む」の画像の左に影が出てます（・・

【blogger】続きを読む、を画像にしてみる。 | sunabox
--Read More-- 続きを読むの記事区切りを、なんとなく画像にしてみたくなったので、試してみました。 ...

これは、この記事で、「続きを読む」部分を、作成した画像に変えて表示していたものなんですが、chromeだとこんな事にならずに表示されるので、どうもIEで表示すると出てしまっているようです。

また、記事フッター部分の「Label」「comment」の部分も、投稿枠を左に飛び出して表示されていました。

---

さて、これではいけないと、対処法を探しだしたんですが、IEでのCSS表示がおかしい時の対処が、なんだかややこしいものばかり。私にはちょっと追いつきません。

できれば、CSS内に直接書き込める方法がいいなと思って探したところ・・・

IEのCSSの不具合を直す魔法の言葉「zoom:1」 | CSS-EBLOG
IE の CSS 表示で、たまになんだか変な挙動になることありませんか？ 高さがおかしくなったり、場所がずれたり。 ...

ありました！

IE の CSS 表示で、たまになんだか変な挙動になることありませんか？
高さがおかしくなったり、場所がずれたり。
ちょっとどこで読んだか忘れてしまったんですが、どうやら特定のスタイルを適用すると、レンダリングが変わるんだかなんだかだとか。hasLayoutがONになるプロパティを指定すると、CSS の解釈が変わります。（IE のみ）
なので、たまにheightやborderを設定すると表示が改善された、なんてことありませんか？
それらが、その「特定のスタイル」のようです。
だから、それらを設定することで正常に表示されたりするんですね。

とのこと。
さらに、

そんなときにzoom:1です。
これは IE 独自スタイルにも関わらず、上で書いたように「特定のスタイル」の中に含まれます。
なので、heightなどで表示が改善されるような場合、そのスタイルにzoom:1を指定しておけば他のブラウザに影響を与えることなく IE だけにスタイルを適用することが可能となります。

という事で、
カスタムCSSの追加、画面内で、

/*　続きを読む　*/ 
div.jump-link a {
margin-left:5px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #BBB;
-moz-box-shadow: 2px 5px 12px #BBB;
-webkit-box-shadow: 2px 5px 12px #BBB;
-box-shadow: 2px 5px 12px #BBB;
-webkit-transition:  all 0.1s;
-moz-transition: all 0.1s;
transition:  all 0.1s;
}

こういう記載をしていたのですが、

/*　続きを読む　*/ 
div.jump-link a {
margin-left:5px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #BBB;
-moz-box-shadow: 2px 5px 12px #BBB;
-webkit-box-shadow: 2px 5px 12px #BBB;
-box-shadow: 2px 5px 12px #BBB;
-webkit-transition:  all 0.1s;
-moz-transition: all 0.1s;
transition:  all 0.1s;
zoom:1;
}

と、最後に『zoom:1;』を足してみました。

結果、無事改善。

投稿フッターのラベル、コメントの表示のずれを直す

次は、投稿フッター部分の表示ずれだ、と思って・・・
『HTMLの編集』から、多分これだって部分を探します。

.post-footer {
  margin: .5em 0 0;
  color: $(post.footer.text.color);
  line-height: 1.6;
  zoom:1;
}

上にpost-bodyの表示があるし、たぶんこの辺と思って、『zoom:1;』を足してみたところ、こちらもこれだけで改善しました。

あんまり詳しいところまで調べる気がなかったので、『zoom:1;』って結局何？って感じではいるんですが、あまりに簡単だったのでいいかと思ってしまっています。

どうもIEでの表示だけ崩れるって人は、一度試してみてもいいんじゃないでしょうか？って思いつつ、それではまた・ｗ・