带有垂直文本的垂直菜单答案

【问题标题】：Vertical menu with vertical text带有垂直文本的垂直菜单
【发布时间】：2011-05-29 20:59:30
【问题描述】：

我需要一个带有垂直文本的垂直菜单。

这是工作示例的链接：

http://jsfiddle.net/cyxuD/4/embedded/result/

你可以在 jsfiddle 网站上编辑它。

如何让它在 Firefox 和 IE 中运行？

HTML：

<ul>
    <li><a href="#TabStrip-1">Text 1</a></li>
    <li><a href="#TabStrip-2">Text 2</a></li>
    <li><a href="#TabStrip-3">Very long text...</a></li>
</ul>

【问题讨论】：

据我估计，它应该可以在 Firefox 和 IE 中工作...我的意思是你有 Microsoft 过滤器和 -moz-transform 属性。我什至从未听说过这些属性中的任何一个，但我建议在 Google 上查找 html / css 转换教程。找一个可以在 Firefox 和 IE 上运行的演示，使用它，但根据您的需要进行更改。
顺便说一句，与其告诉我们将您的代码保存为网页，您最好发布一个JS Fiddle 或JS Bin，演示并指导我们（以及复制相关代码在这里）。
谢谢，我不知道。
@ClarkeyBoy - 是的，它拥有一切，但仍然需要设计风格。
一个小错误，应该是-webkit-transform

标签： css stylesheet styles styling

【解决方案1】：

垂直文本？像这样：

V
电子
r
t
我
c
一个
l
?

我最近更改了 sIFR 字体替换来为我做这件事，而且效果很好 - 如果 Flash 和 Javascript 在你的情况下是可以接受的？

【讨论】：

你能举个例子如何使用sIFR字体替换吗？
没有。点击链接，您将看到一个示例。
Hrm，抱歉，我没有在 IE/FF 中签入，而是在 Chrome 中不假思索地签入 - Chrome 使它看起来像一个标准的水平菜单：/ 现在查看您指定的浏览器，它非常酷。这里的 sIFR：en.wikipedia.org/wiki/Scalable_Inman_Flash_Replacement，虽然它不支持垂直文本 - 你必须自己调整 actionscript 文件，或者如果你愿意，明天让我为你提供一个链接。呃，第二个更好的链接是：mikeindustries.com/blog/sifr
谢谢，我可能只使用 CSS。

【解决方案2】：

有趣的 CSS 技巧。我在我的 Firefox 中进行了测试，菜单是垂直的，文本也是如此，但它看起来位置混乱。

经过我的调查，我发现当“li”元素旋转时，轴在它的中间，既不是左边也不是右边。这就是位置混乱的原因，因为在旋转之前，“li”元素向左对齐，但它们的宽度不同。

我重写了你的一些css，现在位置看起来更好，但我认为这不是最佳做法。

ul
{
  float: left;         
  list-style: none;   
  padding: 0;
  margin-left: 40px;     
}

li
{
  display: inline-block;
  margin-left: -85px;
  margin-top: 45px;
  width: 120px;
  border: 1px solid #A7BAC5;
  -webkit-transform: rotate(-90deg); 
  -moz-transform: rotate(-90deg);     
  -o-transform:rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);                 
}

【讨论】：