CSSのIE対応

ブログの表示をIE対応しました。

photo credit: Simon Pow via photopin cc

全てではありませんが、ブログのCSSをIE用にちょっとだけ書き直しました。


具体的には、ボックスからはみ出している部分をはみ出さないようにすることに苦労しました。


線を使うと、なぜか右に1pxはみ出す



ハイライトした行の記述で上要素と同じ幅で表示できるようになるのですが、IEではこれをやると色々と不都合がでるようです。不便です。この場合は、なぜか borderを使うと、1px右にはみ出してしまうようなのでした。


そのため、線が使えないこともあり、「続きを読む」に色を付けました。今まで薄い色を背景色にしていたのですが、線がないと、分かりにくいし、ダサい。


濃い色を付けたほうが、かえってよかったかもしれませんが...。


.jump-link a {
overflow: hidden; /* 枠からはみ出た子要素を非表示にする */
position: absolute; /* ボックス要素を絶対的な位置で配置する */
width: 100%;
left: 0;
right: 0;
margin: 0;
padding: 10px 0px 10px;
border-top: 1px solid #CCC;
background: #06c;
text-decoration: none;
text-align: center;
color: #fff!important;

/* ボックスからはみ出さないようにする */
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.jump-link a: hover {
/* border: 1px solid #06c; */
box-shadow: 0 0 12px #06c inset;
background: #EEE;
color: #2288bb!important;
}



上要素と同じ幅で表示することができず



上要素と同じ幅で表示するには、下の組み合わせで実現できるはずなんですが、なぜかIEだけはできず。はみ出してしまう。やはり、 他のブラウザとは、z-indexあたりの扱いが違うからでしょうか。


overflow: hidden; /* 枠からはみ出た子要素を非表示にする */
position: absolute; /* ボックス要素を絶対的な位置で配置する */



下記の記事と同じ症状。


IEでoverflow:hiddenが効かない


具体的には、以下の様な感じにしたい。

<div class='post-outer'>
<div class='post-outer2'>

<!-- ラベル -->
<div class='label-size'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/></a>
</b:loop></b:if></span></div>
<!-- ラベル -->

<!-- 日付 -->
<div class='datebox'>
<script type='text/javascript'>
var timestamp = &quot;<data:post.dateHeader/>&quot;;
</script>
<span class='date'><script type='text/javascript'>document.write(timestamp);</script></span><div style='clear: both;'/>
</div>
<!-- 日付 -->

</div>
</div>



.post-outer {
border: 1px solid #DCDCDC;
margin: 0px 0px 80px 0px;
padding: 0px 20px 0px 20px;
}

.post-outer2 {
overflow: hidden;
position: absolute;
width: 100%;
left: 0;
right: 0;
padding: 5px 10px 0px 10px;
background: #ffffff;
transition: all 0.3s;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 10;
}

.datebox{
font-size:14px;
}

span.date {
float: right;
color: #ffffff;
padding: 2px 7px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ff1f88', endColorstr = '#ff298e');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ff1f88', endColorstr = '#ff298e')";
background-image: -moz-linear-gradient(top, #ff1f88, #ff298e);
background-image: -ms-linear-gradient(top, #ff1f88, #ff298e);
background-image: -o-linear-gradient(top, #ff1f88, #ff298e);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ff1f88), to(#ff298e));
background-image: -webkit-linear-gradient(top, #ff1f88, #ff298e);
background-image: linear-gradient(top, #ff1f88, #ff298e);
}



しかし、IEだけは post-outer2post-outerをはみ出してしまう。最初は、floatを疑ってみたけど、違ったようです。


ただし、そもそも上記の方法は、あまり良い方法ではないので、ある程度カスタマイズしようと思ったら、テンプレートから作るのが一番ですね。(そこに時間を使う予定は全くありませんが...)