Question

昨天我正在制作一个包含多个项目的菜单。在这个固定的导航栏中，我必须添加一个绝对div，它将显示在其中一个菜单项的悬停上。

除了 Safari 6.1.1 （目前为止的最新版本）之外，它在每个浏览器上都能正常运行。实际上，只要绝对定位的div出现在菜单中的所有文本字段都会出现故障。

请注意，如果绝对div没有溢出其父级，则不会发生错误。

我做了一个小小的Jsfiddle以突出显示错误：

这是HTML：

<div class="fixed-block">
    Random text 1
    Random text 2
    <div class="absolute-block">
        Random text 3
    </div>
</div>

这是CSS：

.fixed-block {
    color:#FFFFFF;
    background:#000000;
    position:fixed;
    height: 100px;
    width: 80px;
}
.fixed-block .absolute-block{
    display: none;
    position: absolute;
    font-size:18px;
}
.fixed-block:hover > .absolute-block {
    display: block;
}

对此问题有任何建议或解决方法吗？

谢谢！

Answer 1

我终于回答了我自己的问题。

您可以使用固定父级上的webkit属性修复此错误：

-webkit-font-smoothing: subpixel-antialiased;

我更新了我的jsfiddle： http://jsfiddle.net/tz9s3/6/

Safari 6.1奇怪的bug当绝对定位一个固定div内的div

1 个答案: