-2

デザインしているサイトに問題があります。残念ながら、私は最初にInternet Explorer用に設計しないという罠に陥りましたが、Chromeなどのより使いやすいブラウザに固執しました。IEで見てみると、少し戸惑う問題が見つかりました。

メニューリンクはこちら-

http://mydomain.com/apassociates/page/home

...ちらつきと崩壊。外観を確認したい場合は、Chromeで確認してください。

私はプロのWeb開発者ではなく、これらの問題は経験豊富な開発者にとっては初歩的なものである可能性があると思いますが、実際にはどこから始めればよいのかわかりません。

誰かがこの問題のいずれかについて何か考えや指針を持っていますか？

コメントからのアドバイスに従ってこれに焦点を当てるヘルプを試すために、ここにHTMLがあります-

<div id='home-pictures'>

    <a href='http://mydomain.com/apassociates/page/conservatory'>
        <div id='home-1'>
            <span class='home-link'>Traditional</span>
        </div>
    </a>
    <a href='http://mydomain.com/apassociates/page/blackbrookhouse'>
        <div id='home-2'>
            <span class='home-link'>Commercial</span>
        </div>
    </a>
    <a href='http://mydomain.com/apassociates/page/floodproof'>
        <div id='home-3'>
            <span class='home-link'>Innovative</span>
        </div>
    </a>
</div>

ここのjavascriptは、マウスオーバー時に背景画像を置き換えるために機能します-

// home links
$('div#home-1').mouseover(function () {
  $('div#home-1').css('background-image', 'url(/apassociates/images/content/devonhouse-caption-wash.png)');
});

$('div#home-1').mouseleave(function () {
  $('div#home-1').css('background-image', 'url(/apassociates/images/content/devonhouse-caption.png)');
});

最初のリンクのコードのみを含めましたが、他のコードは、これらを異なるIDタグで複製したものです。

各リンクを固定次元の独自のdivに配置する方がよいかどうか疑問に思っています。崩壊/ちらつきを防ぐことができますか？

4

1 に答える 1

2

このフィドルで問題を切り分けて解決することができました。

HTML:

<div id="home-pictures">
    <a href="http://mikloswe.nextmp.net/apassociates/page/conservatory">
        <div id="home-1" style="background-image: url(http://mikloswe.nextmp.net/apassociates/images/content/devonhouse-caption.png);">
            <span class="home-link">Traditional</span>
        </div>
    </a>
    <a href="http://mikloswe.nextmp.net/apassociates/page/blackbrookhouse">
        <div id="home-2" style="background-image: url(http://mikloswe.nextmp.net/apassociates/images/content/carehome-caption.png);">
            <span class="home-link">Commercial</span>
        </div>
    </a>
    <a href="http://mikloswe.nextmp.net/apassociates/page/floodproof">
        <div id="home-3" style="background-image: url(http://mikloswe.nextmp.net/apassociates/images/content/submersible-caption.png);">
            <span class="home-link">Innovative</span>
        </div>
    </a>
</div>

CSS:

#home-pictures {
    height: 250px;
}
#home-pictures {
    text-align: center;
}
#home-pictures a:link,
#home-pictures a:visited {
    color: #B43104;
    display: block;
    text-decoration: none;
}
#home-1, #home-2, #home-3 {
    margin-left: 20px;
    float: left;
    height: 256px;
    width: 285px;
    zoom: 1;
}
.home-link {
    color: #B43104;
    display: block;
    float: left;
    font-family: 'book antiqua', palatino, serif;
    font-size: 24px;
    margin-left: 15px;
    position: relative;
    top: 220px;
}

JavaScript:

// home links
$('div#home-1, div#home-2, div#home-3').mouseenter(function () {
    $(this).css({
        'filter' : 'alpha(opacity=50)',
        'opacity' : '0.5'
    });
}).mouseleave(function () {
  $(this).css({
        'filter' : 'alpha(opacity=100)',
        'opacity' : '1.0'
    });
});

ホバーの画像ではなく、不透明度に依存するように JavaScript を変更しました。それはdiv内にもあるため、画像の下のフォントに影響しますが、これらのそれぞれに専用のdiv（「div.image」など）を作成し、背景と不透明度を画像全体ではなく画像のみに設定することもできますアイテム...

アップデート：

不透明度は IE では扱いにくい場合があります。css と javascript を更新して、IE でも動作するようにしました... フィドルも更新されました。クロスブラウザーの不透明度は、この投稿から取得されました。私は何度も戻ってきます...

于 2012-12-20T23:24:53.593 に答える