「EqualHeight」や「flatheights」など複数の要素の高さを揃えるjavascriptを使用すると、SafariとGoogle Chromeではうまく動作しない場合があります。
うまく動作しない場合の対処方法をメモしますので、気になる方はご覧ください。
[js]
jQuery.event.add(window,"load",function(){
//実行式
};
[/js]
分析されている方がいました。
・$(function(){}) は、$(document).ready(function(){}) の短縮形であり、DOMContentLoaded という DOM 構築完了イベントへのハンドラ記述法である。
・WebKit系ブラウザでは DOMContentLoaded 発火の時点で画像のロードが完了しておらず、img タグに width や height 属性を明示しない限り画像のロードが完了するまで幅や高さ等が JavaScript で取得できない。
・したがって画像を含むブロック内部の高さも算出することができず、画像抜きの高さとなってしまう。
・これを回避するには DOMContentLoaded イベントではなく、画像のロードが全て完了した後で発火される window.onload を用いる。
引用元：jQuery – $(function(){}); の落とし穴
http://d.hatena.ne.jp/Mariyudu/20111020/1319121759
以下にデモページを作っております。
http://fjri.webcrow.jp/javascript/load/