通过Javascript进行Safari绝对定位

时间:2012-05-10 01:48:19

标签: javascript css-position safari

我正在创建一个选择鸡尾酒的轮选择器。它使用图像映射,当悬停在特定区域上时,存在由javascript生成的悬停状态。它在Chrome,Firefox和IE9中运行良好,但我遇到了Safari的问题。绝对定位似乎不适用于我的悬停指示器。

在此处查看此操作: http://thehoochlife.com/mood-selector-test/

以下是我用于在图像地图区域创建悬停状态的javascript示例:

function overStubborn() {
indicator.css({
    'display' : 'block',
    'left' : '227px',
    'top' : '54px',
    '-webkit-transform' : 'rotate(169deg)',
    '-moz-transform' : 'rotate(169deg)',
    '-ms-transform' : 'rotate(169deg)',
    '-o-transform' : 'rotate(169deg)',
    'transform' : 'rotate(169deg)'
});
indicator.on('click', function() {
    jQuery('#stubborn').click();
    return false;
});
}

.indicator元素的CSS是:

.mood-selector .indicator {
cursor: pointer;
display: none;
height: 27px;
position: absolute;
z-index: 100;
}

position: absolute;上有一个.mood-selector。 任何想法为什么绝对定位在Safari中不起作用?在此先感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

合并absolute positiontransform的已知问题。

请参阅http://code.google.com/p/chromium/issues/detail?id=82225

我在Safari上遇到了同样的问题并在Chrome上工作过,找到了两个解决方案,您可以将indicator拆分为两个元素,父级用于位置,子级用于转换,或者您可以添加translateZ(0)transform中,即'-webkit-transform' : rotate(169deg) translateZ(0)