-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)');
});

我只包含了第一个链接的代码，其他代码只是这些带有不同身份标签的重复。

我想知道我是否会更好地将每个链接放入其自己的固定尺寸的 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 回答