Operaは、CSSでパーセント指定の長さの小数点以下は計算してくれない

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で見てみると

OperaはCSSで長さに小数点はだめぽ例

のような感じで、右端に少し空きができちゃいます。
例えばFirefoxと比べると

FirefoxとOpera比較

こんな感じで、小数点以下分、合計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。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です