Question

我正在维护一个传统的Web窗体应用程序，该应用程序目前实际上只在IE兼容模式下运行。我们正在努力使其得到修复/更新，以便它可以在IE 11中运行，而无需使用兼容模式（以及其他＆＃34;现代＆＃34;浏览器）。我们有一个＆＃34;导航＆＃34;页面右侧的菜单面板，有一个＆＃34;标签＆＃34;元素的类型（不是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://www.faqs.org/docs/bashman/bashref_63.html这说明了我到目前为止所做的以及我想去的地方。我试图对表格内页面的布局进行粗略的再现。我有三个区域，我用颜色编码，以便更容易看到每个区域是什么。我尝试在自己的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内旋转范围。像这样：

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/

最后，看看报复决定基于表格布局的开发者:-)

如何旋转元素并使用CSS或jQuery正确定位它

1 个答案: