IEはキライですコンバンハ。
IE + javascript + 画像 でえらくハマったので気晴らしに書きますｗ
今回ハマったこと
- display:none にしたdivの中に画像をセット
- セットした画像の幅、高さを取得する
[html title="サンプルHTML"]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ja">
<title>値を取れないパターン</title>
<style type='text/css'>
#image_box{
display: none;
}
</style>
<script type='text/javascript'>
function getSize(){
var target = document.getElementById('image');
alert('width:' +target.width +'\n' +'height:' +target.height);
}
</script>
</head>
<body>
<h3>値を取れないパターン</h3>
<button onclick='getSize();'>値を取得！</button>
<div id='image_box'>
<img src='https://zafiel.wingall.com/nico/python1/img/1.jpg' id='image'>
</div>
<div style='border-top:1px solid #ccc;margin-top:1em;color:#999;padding-top:10px;text-align:center'>footerほげふが</div>
</body>
</html>
[/html]
ボタンを押すと、画像の高さと幅を取得して表示します。
で、ボタン押をしてみると
高さ、幅ともにゼロ。え？？？
サンプルページ (IEで試してみてください)
対処方法
IEは要素を画面に表示してあげないと値を取れないらしい。なんじゃそら。
display:none;をやめて、visibility:hidden にすると
サンプルページ
・・・取れるし。
visibility:hidden だと内包している要素にひっぱられてレイアウトが崩れちゃうので、最終的には position:absolute にして、画面外にすっとばしちゃえばＯＫ。
サンプルページ
たったこれだけだけど、気づくまでえーーらくかかってしまいました。うえええ。
IEキライ！カエレ！！(`Д´*)