私は一般的にjsにかなり慣れていませんが、私が読んだチュートリアルから、これはうまくいくはずだと思われます。このプラグインを使用して、3つのボックスを同じ高さにしようとしています...ボックスには、境界線の半径と、必要に応じて他のスタイルが適用されています。
スクリプトコード：
$.fn.equalHeights = function(px) {
$(this).each(function(){
var currentTallest = 0;
$(this).children().each(function(i){
if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
});
if (!px && Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
// for ie6, set height since min-height isn't supported
if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
$(this).children().css({'min-height': currentTallest});
});
return this;
};
// just in case you need it...
$.fn.equalWidths = function(px) {
$(this).each(function(){
var currentWidest = 0;
$(this).children().each(function(i){
if($(this).width() > currentWidest) { currentWidest = $(this).width(); }
});
if(!px && Number.prototype.pxToEm) currentWidest = currentWidest.pxToEm(); //use ems unless px is specified
// for ie6, set width since min-width isn't supported
if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'width': currentWidest}); }
$(this).children().css({'min-width': currentWidest});
});
return this;
};
ページコード：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
<script src = "js/jQuery.equalHeights.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){ $('#equalize').equalHeights(); });
});
</script>
そして、同じ高さにしたい3つのボックスを含むdivに「equalize」のIDを適用しました。効果がないようで、IEは「$。browser.msieがnullであるか、オブジェクトではありません」というスクリプトエラーをスローします。
該当する場合は、xamppを使用してphpページでこれをローカルで実行しています。
これは私の側の愚かな初心者の間違いであると確信しています。私はそれを追いかけるために2時間ほど真剣に費やし、あきらめました。誰かがチャイムを鳴らすことができれば、私は本当に感謝します！
ありがとう、ジョー