1

CSS ベースのアプローチを使用して、特定のアスペクト比に合わせて画像をトリミングしています。バックエンドでは、画像の高さと幅にアクセスし、画像とトリミング先のスペースとの縦横比の違いを考慮して、スパン ラッパー内に画像を絶対に配置します。バックエンド コードはここでの私の関心事とは関係ありませんが、フロントエンド コードは次のように機能します。

<a href="some-link-url">
    <span class="croppedImageWrapper" style="height:115px;width:115px;" title="(Some title)">
    <img src="some-url-for-img-with-aspect-ratio=1.36" style="height:100%;top:0px;left:-28px;" />
    </span>
</a>

.croppedImageWrapper {
    display:inline-block;
    position: relative;
    overflow: hidden;  
}

.croppedImageWrapper img {
    position: absolute;
}

.croppedImageWrapperIE7を除いて、サポートする必要があるすべてのブラウザで問題なく動作します。私はこれをjQueryの簡単なチェックで扱ってきました:

if ($.browser.msie && parseInt($.browser.version, 10) == 7)

... 次に、スパンにクリック イベントをアタッチし、その親リンクの href を取得して、リダイレクトします。しかし、jQuery 1.9.1 にアップグレードしたので、これは機能しなくなり$.browserました。機能検出を支持して廃止されました。

*だから私の質問は: *

機能 (バグ) 検出を使用して、このバグを嗅ぎ分けるにはどうすればよいでしょうか? それとも、IE バージョン検出器をハックする必要があるのでしょうか?

4

1 に答える 1

1

私は自分のプロジェクトの 1 つでこれを使用しました。これは、jQuery Migrate スクリプト全体を含める必要のない $.browser の単純な置き換えです。

http://pupunzi.open-lab.com/2013/01/16/jquery-1-9-is-out-and-browser-has-been-removed-a-fast-workaround/

jQuery.browser = {};
jQuery.browser.mozilla = /mozilla/.test(navigator.userAgent.toLowerCase()) && !/webkit/.test(navigator.userAgent.toLowerCase());
jQuery.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
jQuery.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());
jQuery.browser.msie = /msie/.test(navigator.userAgent.toLowerCase());

また、以下と組み合わせて使用​​する必要があります。

navigator.appVersion
于 2013-05-22T08:34:37.037 に答える