0


0

jQuery / CSSイメージの問題。 Operaは未知の理由で画像の一部のみを読み込みます

Internet Explorerで日々の問題に遭遇するのは驚くことではありませんが、実際にOperaのようなブラウザでそれを行うと、いやいやいやになります。

Firefox、Chrome、IEで動作するほとんどのものを入手しました(fancyboxがすべてのIE修正を緑と検証しているわけではありませんが、それは別の問題です)。

とにかく、私が理解できないと思われる問題は、スクリーンショットで説明するのが一番です!

ホバーは機能しているように見え、想定どおりに画像を明るくします。 しかし、他のブラウザのように「色あせた」画像を正しく表示しないようです。 上記のように、画像の一部のみが表示されます。

Operaユーザーは、hxxp://*www.patrikarvidsson.com/project/portfolio*でWebページを見ることができます。

1日前に友人から報告されたように、これを自分用に再作成するために、今日の最新のOperaをインストールしました。

// LiveQuery for Fade-Effect

$(".thumb").livequery(function(){
$(".thumb").css("opacity","0.6");
    $(".thumb").hover(function () {
        $(this).stop().animate({
           opacity: 1.0
        }, "fast");
},
 function () {
    $(this).stop().animate({
        opacity: 0.6
        }, "fast");
    });
});

リンクの1つに対するjQuery .load-code。

    $("a.dartLink").click(function(){
    $('div#content').load("content/digitalart.php");
    return false;
});

ギャラリーページの1つへのリンク(リストで囲まれています)。

    Digital Illustrations

親指の1つのHTML。


ただし、考え直してみると、これはjQueryに関連していない可能性があります。 念のためCSSタグを追加しました。 何がこれを引き起こしているのかはまだわかりませんが。 残念ながら、この投稿を編集したため、新しいユーザーとして画像とハイパーリンクの制限が再び適用されます。

投稿を編集しました。 必要なコードを含めることができたと思います。

2 Answer


0


パトリック、

これはあなたの質問の中核ではありません(そして、分析できるコードを提供するまで、私はそれに答えることを控えます)が、IEを使用するときはライトボックスプラグインに注意してください。 ページに多くの画像がある場合、非常に奇妙な動作をします(つまり、 [駄洒落なし]ブラウザ全体の実行を停止し、すべての画像がロードされるまでオペレーティングシステムの速度を低下させます)。 この問題に対する私の解決策は、colorboxプラグインを使用することでした。これは次の場所にあります。

IEで完全に機能することを除けば、ライトボックスと同じくらいきびきびとしています。


0


私はオペラをホバーにインストールしていません。あなたの問題はサムネイルを含むボックスの `display:inline`を使用しているからだと確信しています。 Try:

.thumbbox {
display: inline-block;
padding: 0px;
}

Operaは単にコンテナのサイズに合わせて画像をトリミングしています(検証にはchrome devツールを使用しました)。 IE6および7のディスプレイをインラインに設定し、「min-height:1%」または「zoom:1」ハックを適用して同じ効果を得る必要があります。 または、これらのdivをフロートさせることができます。これらのdivを確実に含めるには、追加の安全ガードが必要です。

それが役立つことを願っています!

編集

さらに、「」の下の「および」タグ

これらは両方ともインライン要素であるため、「display:block」に設定する必要がある場合があります。