如何旋轉元素並使用CSS或jQuery正確定位元素

Question

我正在維護一個傳統的Web窗體應用程序，它當前只能在IE兼容模式下運行。我們正在努力修復/更新它，以便它可以在IE 11中運行，而無需使用兼容模式（以及其他「現代」瀏覽器）。我們在頁面的右側有一個「導航」菜單面板，它有一種「標籤」類型的元素（不是一個html標籤，我只是把它稱爲一個標籤，因爲我想不出現在更好地描述它）文本旋轉-90（或270）度。此前，它有特定的IE瀏覽器CSS是這樣的：

{ 
    writing-mode: tb-rl; 
    filter: flipv fliph; 
} 

造成標籤的文本旋轉從上到下，然後翻轉，使其閱讀底部到頂部，從左至右。它在當時的佈局中工作得非常好，但IE 11和其他現代瀏覽器無法識別CSS，並且它最終呈現爲從左到右的文本，而不是從底部旋轉到頂部。這裏是什麼樣子用ASCII藝術粗略表示：

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 
x ======================/=====x 
x |  Main   | | | M |x 
x | Content   | | | E |x 
x |  Panel   | | | N |x 
x ====================== \ | U |x 
x       | |x 
x       | P |x 
x       | A |x 
x       | N |x 
x       | E |x 
x       | L |x 
x       =====x 
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 

的導航菜單面板的標籤上的菜單面板左側的梯形期待的事情。

頁面最初是使用表格進行佈局編寫的。雖然我希望能夠完全現代化並更正佈局而不使用表格，但我們並沒有真正有時間來完全修改這種佈局。頁面上的所有內容都放在一個大的表格中。然後，在<tr>中，上述每個元素都在其自己的<td>元素中：主內容面板，梯形標籤和菜單面板。裏面的梯形的<td>的，有三個<tr>的另一個表：一個是在頂部的三角形，一個文本，一個是底部的三角形：

<table width="100%"> 
    <tbody> 
     <tr> 
      <td valign="center" width="100%" class="topTriangle"> 
       &nbsp; 
      </td> 
     </tr> 
     <tr> 
      <td height="20" valign="middle" class="navLabel"> 
       <img src="~/navArrow.gif"/> 
       <span>Navigation Label &raquo;</span> 
      </td> 
     </tr> 
     <tr> 
      <td valign="center" width="100%" class="bottomTriangle"> 
       &nbsp; 
      </td> 
     </tr> 
    </tbody> 
</table> 

我不是HTML/css專家和我遇到麻煩的部分是獲取該標籤中的文本旋轉正確的方式，而無需使用自定義IE CSS。我已經用一個帶有文本的div替換了上面的子表格，我已經用CSS將它變成了一個梯形。但是，當我嘗試使用CSS transform函數時，我可以旋轉元素，但元素的寬度會弄亂所有內容的間距。另外，當用戶點擊標籤時，應該摺疊菜單面板，標籤和主要內容面板應該向右滑動以佔據空間。

我在這裏有一個jsfidde：http://jsfiddle.net/greyseal96/vb6bou17/1/這說明了我到目前爲止以及我想去的地方。我試圖對錶格內頁面的佈局做一個非常粗糙的重現。我有三個顏色編碼的區域，以便更容易地看到每個區域是什麼。我試過在自己的div中使用標籤，並使用CSS轉換函數旋轉它，但元素的寬度導致間距關閉。我嘗試使標籤絕對定位，然後使用jQuery UI .position（）函數將標籤放置在正確的位置，但是當我調整頁面大小或摺疊菜單面板時，元素絕對定位並且不會重新定位。

我一直在嘗試這麼多的事情，但我似乎無法得到這個，所以我希望有人可以幫助我弄清楚如何讓這個元素定位我們需要定位的方式。

Answer 1

不完全確定你想要達到什麼目的，但看起來你不需要做任何基於JS的定位。相反，將奇怪的梯形東西放在紫色間隔元素內：

<div id="Spacer" class="spacer"> 
    <div id="NavPanel" class="container"> 
    <span>Some text</span> 
    </div> 
</div> 

並在#NavPanel中旋轉span。就像這樣：

div#NavPanel > span { 
    transform: rotate(270deg); 
    transform-origin: left bottom 0; 
    display: inline-block; 
    width: 120px; 
    position: absolute; 
    bottom: 0; 
} 

http://jsfiddle.net/vb6bou17/4/

最後，去看看在哪個開發商報復決定基於表格的佈局:-)