jquery - -webkit-transform 旋转不带浮动属性

Question

我正在尝试使用双直角引号 ( ») 作为下拉指示符。我让它在我的导航中工作，那里有一个float: right;分配给它。然而，在导航之外，当我没有float:分配给它时，它不会旋转。我通过向包含直角引号down的元素添加一个类来使用 jQuery 和 CSS3 旋转箭头。<span>

这是down添加以旋转箭头的 css 类：

.drop-arrows.down {
    /* FF Chrome Opera etc */
    -webkit-transform: rotate(90deg) !important; 
    -moz-transform: rotate(90deg) !important;
    -o-transform: rotate(90deg) !important;
    /* IE */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

该类是在通过 jQuery 激活下拉菜单时添加的。唯一的问题是，如果没有添加到箭头容器，这也不起作用float，这让我很困惑。

这是包装箭头的 HTML：

<a id='filter-trigger' href='javascript:void(0);'>FILTERS <span class='drop-arrows'>&raquo;</span></a>

是否-webkit-transform需要浮动才能工作？难道我做错了什么？

Answer 1

你需要设置绝对位置

.drop-arrows {
    position: absolute;
    /* FF Chrome Opera etc */
    -webkit-transform: rotate(90deg) !important; 
    -moz-transform: rotate(90deg) !important;
    -o-transform: rotate(90deg) !important;
    /* IE */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}