-1

こんにちは、私は JS を使用した UL メニューを持っています。IE では、DIV のタイトル「フィルター」は垂直で正しいように見えますが、Chrome では水平です。

お手伝いありがとう

ブラウザ ここに画像の説明を入力

クロームブラウザ ここに画像の説明を入力

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 に答える