Javascript HTML菜单标题在CHROME中为水平

大家好，我有一个UL菜单使用JS和IE标题“过滤器”的DIV是垂直的，看起来正确，但在铬它是水平的

谢谢你的帮助

IE浏览器

浏览器

HTML:

JS:

---

到目前为止，IE仅支持过滤器。这是HTML5的东西。规范还没有完成，浏览器只是偶尔实现规范的一些部分。例如，IE不支持画布，其他主流浏览器都支持画布

尝试使用：

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

在文本周围添加

元素：

<div id="filterItem" class="sideMenuDiv" >
    <img src="../images/plus.gif" />&nbsp;
    <span>Filters</span>
</div>

请参见此处的JSFIDLE示例>

---

显然，您需要对定位等方面进行修补，但这应该可以为您解释一个起点。

您是否尝试过使用文本旋转？前面已经提到过，但您没有使用交叉兼容的代码。过滤器只是一个IE的东西（很可能会保持这样，因为Transform似乎在这里处于领先地位）。这就做到了…谢谢…哪个混蛋投票关闭了这个？？。。。

 $(document).ready(function()
{
    $("#filterItem").click(function() {
        $("#filterPanel").fadeToggle("slow", function() {
            toggleImg( 'filter' );
        });
        $(this).toggleClass("active");
        toggleImg( "filter" );
        return false;
    });
    $("#filterPanel").draggable({ snap: "#filterItem" });
});

function closeDraggablePanel( panelName, topPos)
{
    $("#"+panelName+"Panel").toggle("slow", function() {
        toggleImg( 'filter' );
        // Reposition to default
        $("#"+panelName+"Panel").css( "top", topPos);
        $("#"+panelName+"Panel").css( "left", "25");
    });

}

function toggleImg( name )
{
    if( $("#" + name +"Panel" ).is(':visible') )
    {
        $("#" + name + "Item" + " > img").attr("src", "../images/minus.gif");
    }
    else
    {
        $("#" + name + "Item" + " > img").attr("src", "../images/plus.gif");
    }
}

// Toggle the display of the element with the given ID.
function toggle(id)
{
    $('#' + id).slideToggle("slow");
}

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

<div id="filterItem" class="sideMenuDiv" >
    <img src="../images/plus.gif" />&nbsp;
    <span>Filters</span>
</div>

div.sideMenuDiv span {
    display: block;
    -webkit-transform: rotate(270deg);   
}