-1

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

感谢您的帮助

IE浏览器 在此处输入图像描述

铬浏览器 在此处输入图像描述

HTML：

<div id="filterDiv">
<ul class="sideMenu" style="top: 280px;">
<li style="border-bottom: none;">
    <div id="filterItem" class="sideMenuDiv" ><img src="../images/plus.gif" />&nbsp;Filters</div>
</li>
</ul>
</div>

CSS：

ul.sideMenu {
    position: fixed;
    top: 150px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    list-style: none;
}

ul.sideMenu > li {
    height: 80px;
    width: 25px;
    background-color:#000066;
    cursor:pointer;
    border-bottom: 1px white solid;
}

div.sideMenuDiv {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color:#000066;
    color: #FFFFFF;
    font-weight: bold;
    writing-mode: tb-rl;
    filter: flipv fliph;
    font-size: 10pt;
    font-family: arial, sans-serif;
    height: 100%;
}

JS：

 $(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");
}
4

2 回答 2

1

<span>在文本周围添加一个元素：

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

然后使用 CSS3 变换：

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

请参阅此处的 jsFiddle 示例 > http://jsfiddle.net/TsUmk/。

显然，您需要修改定位等，但这应该为您解释一个起点。

于 2012-12-12T19:46:03.870 回答
0

过滤器目前仅在 IE 中受支持。这是一个 HTML5 的东西。规范还没有完成，浏览器只是零星地实现了规范的一部分。例如，IE 不支持画布，而其他所有主流浏览器都支持。

尝试使用：

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
于 2012-12-12T19:43:53.990 回答