如何旋转元素并使用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/

最后，去看看在哪个开发商报复决定基于表格的布局:-)