1

理由(すみません、私は冗長です、私は知っています)

これは難しい、または珍しい要求かもしれませんが、私が管理している Web サイトには、テーブル内に格納された画像を含むページがたくさんあります。ユーザーは、キャプションのために、またはレイアウトが期待どおりであることを確認するために、そこに画像を配置します。私のユーザーのほとんどは、DIV を使用するのに十分なほど精通していないため、テーブルがなくなることはありません。

私は自分のサイトをレスポンシブにすることに取り組んでいますが、これらの画像で遭遇した問題の 1 つは、画像がテーブルにあり、ビューポートのサイズが変更されたときにブラウザーの動作が異なることです。たとえば、Firefox は、画像がテーブルにネストされている場合、最大幅 100% を使用して画像を拡大縮小しません。 この前の質問によると、これは、インライン要素にネストされた場合の画像の処理方法に関する仕様がないことも一因です。

この問題を解決する唯一の方法は、画像の幅/高さを img タグから取り出し、CSS で幅を 100% に設定することです。これにより、Firefox は画像が表のセルにある場合でも一貫して画像を縮小します。 これは、私が修正しようとしているタイプの例です。Drupal/CKEditor は画像の幅をスタイル タグに入れるのが好きで、それを修正するには CSS/JS が必要です。

質問

インライン要素内の最大幅をサポートしていないブラウザーにのみ、CSS/JS 修正を適用したいと考えています。Modernizr でこれをテストする方法はありますか? 私のサイトの JS の現在のイテレーションでは、Modernizr でブラウザ チェックを行って、ユーザーが Firefox を使用しているかどうかを確認し、検出された場合は修正を適用しています。好奇心旺盛な人のために、これが私がやっている方法です(Firefoxチェックのソース)。

Modernizr.addTest('firefox', function () {
 return !!navigator.userAgent.match(/firefox/i);
});

jQuery('.firefox #zone-content img').each(function(){
    jQuery(this).removeAttr('width');
    jQuery(this).css('width', '');
});

これを書き直す簡単な方法があることを願っています。これにより、ブラウザー検出を使用する必要がなくなりますが、modernizr addTest API についての私の理解は限られています。他の誰かが同様のものを作成し、知識を共有できることを願っています。

4

0 に答える 0