Opera最強伝説なのに、CSSのwidthやheightなどで、パーセントで長さを指定した場合、小数点以下は計算をしてくれないとは、これ如何に。まあ今更の話だけども。
例えば
<!-- CSS -->
<style type="text/css">
ul{
background:#444;
width:400px;
height:56px;
margin:0;
padding:10px;
list-style:none;
}
li{
float:left;
color:#FFF;
text-shadow:0 0 2px #000;
width:12.5%;
height:56px;
line-height:56px;
margin:0;
padding:0;
text-align:center;
}
li.abc{
background:#666;
}
li.def{
background:#888;
}
ul:after{
content:'';
display:block;
clear:both;
}
</style>
<!-- HTML -->
<ul>
<li class="abc">OPE</li>
<li class="def">RA</li>
<li class="abc">最強</li>
<li class="def">伝説</li>
<li class="abc">OPE</li>
<li class="def">RA</li>
<li class="abc">最強</li>
<li class="def">伝説</li>
</ul>
こんなのをOperaで見てみると
のような感じで、右端に少し空きができちゃいます。
例えばFirefoxと比べると
こんな感じで、小数点以下分、合計4%=16ピクセル分ずれますん。
俺の場合、こういう時は何だかなあと思うけど、Opera用に簡単なjsで対応してます。
<script type="text/javascript">
if(window.opera){//Operaだったら
$(function(){
$("li").css("width",$("ul").width()/8+"px");//liのwidthをulの1/8pxに
$(window).resize(function(){//ウィンドウがリサイズされたら
$("li").css("width",$("ul").width()/8+"px");//liのwidthをulの1/8pxに
});
});
};
</script>
こんな感じのjsでおk。