HTML菜單標題水平

-1

你好我的全部使用JS和IE的標題是「過濾器」的UL菜單的DIV是垂直的，看起來是正確的，但在Chrome中是水平HTML菜單標題水平

謝謝你的幫助

IE瀏覽器 enter image description here

CHROME BROWSER enter image description here

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

來源

2012-12-12 Doc Holiday

您是否嘗試過使用[cross-browser]（http://css-tricks.com/snippets/css/text-rotation/）文字旋轉？ – Blender

你是怎麼做到的？ –

已經提到過，但是你沒有使用交叉兼容的代碼。過濾器只是一個IE事物（並且可能會保持原樣，因爲Transform似乎在這裏處於領先地位）。 – rlemon

添加<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-12 19:46:03 BenM

這樣做......謝謝....什麼混蛋投票結束這個?? ... –

過濾器在IE瀏覽器只支持到現在爲止。這是一個HTML5的東西。該規範還沒有完成，瀏覽器只有零星的部分規範。例如，IE不支持canvas，其他所有主流瀏覽器都支持。

嘗試使用：

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

來源

2012-12-12 19:43:53

HTML菜單標題水平

回答

相關問題