0

我最近发布了一个网站 ( http://www.howrad.me )，一切正常，除了在 Safari 中悬停。叠加层pgaTitle与图像不对齐pgaPhoto。

这是绘图部分的代码示例（http://howrad.me/tattoos.html#drawings）

        <a class="fancybox" data-fancybox-group="thumb2" title="2012 baybay" href="images/2012/1.jpg">
        <div class="pgaPhoto">
        <div class="pgaTitle" style="display: none;">
        <h2>2012</h2>
        </div>  
        <img src="images/covers/drawing2012.jpg" />
        </div></a>


        <a class="fancybox" data-fancybox-group="thumb3" title="figure study"href="images/2009/drawings/1.jpg">
         <div class="pgaPhoto">
         <div class="pgaTitle" style="display: none;">
        <h2>2010</h2>
        </div>  
        <img src="images/covers/drawing2010.jpg" />
        </div></a>

html 语法对我来说似乎很好，下面的 jquery 工作正常：

        $(document).ready(function() {
            $(".pgaPhoto").hover(function() {
                $(this).find(".pgaTitle").stop().fadeTo(300, 1 , function() {
                });
            } , function() { //on hover out...
                $(this).find(".pgaTitle").fadeTo(300, 0);
            });
        });

我只是不明白为什么左侧图像的悬停状态会稍微偏离，尤其是当我在其他浏览器中没有真正的问题时。有什么帮助吗？？非常感谢你！

4

1 回答 1

1

您在块和内联元素之间混淆了。

<a> is an inline element
<div> is a block element

块可以包含内联元素，但内联元素不能包含块。

每当您将块放入内联元素中时，浏览器都会找到解决差异的方法，但您会得到无效的 HTML 并遭受更多错误。

要解决您的问题，请将您的<div>块放在<a>元素之外，或者将您<div>的 s 替换为最接近的内联等效项：<span>.

于 2013-03-13T21:45:48.073 回答