javascript / jQuery / CSS - 垂直文本？答案

【问题标题】：javascript / jQuery / CSS - vertical text?javascript / jQuery / CSS - 垂直文本？
【发布时间】：2011-05-02 12:46:56
【问题描述】：

如何使文本垂直绘制，例如在此站点中：http://cure.org/help-now/？我看到它是用 jQuery + SlideDeck 完成的，因为我看到它们已加载，但插件究竟是如何做到这一点的呢？

Firefox 有 css -moz-transform，但其他浏览器没有这样的属性，并且该站点的垂直文本显示在所有浏览器中

【问题讨论】：

标签： javascript jquery css vertical-alignment

【解决方案1】：

This answer 提供了适用于 IE、Firefox、Opera 和 Webkit 的解决方案。

【讨论】：

【解决方案2】：

它是用 CSS3 完成的。

CSS3 带有许多新属性，尽管并非所有浏览器都支持所有这些属性。在他们使用的网页上

/* webkit browsers */
-webkit-transform: rotate(270deg);
-webkit-transform-origin-x: 25px;
-webkit-transform-origin-y: 0px;

/* firefox */
-moz-transform:rotate(270deg);
-moz-transform-origin:25px 0;

/* internet explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

如您所见，他们使用 Internet Explorer 过滤器（这有点 hacky）

【讨论】：

【解决方案3】：

在 ie 9 作品上：

margin-bottom:0;margin-left:0;z-index:5;
/* Safari */ -webkit-transform: rotate(-90deg); 
/* Firefox */ -moz-transform: rotate(-90deg);
-moz-transform-origin: 20px 0px;  
/* Internet explorer 7 */  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/* Internet Explorer 8*/  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
-ms-transform: rotate(0deg);
/* opera*/ -o-transform: rotate(-90deg);  
/* opera tmb*/ -o-transform-origin:150px 150px;

【讨论】：

【解决方案4】：

<dt class="spine spine_1 previous" style="position: absolute; z-index: 3; display: block; left: 0px; width: 330px; height: 50px; padding-top: 0px; padding-right: 20px; padding-bottom: 0px; padding-left: 10px; -webkit-transform: rotate(270deg); -webkit-transform-origin-x: 25px; -webkit-transform-origin-y: 0px; text-align: right; top: 335px; margin-left: -25px; ">
  GIVE
  <div class="index" style="position: absolute; z-index: 2; display: block; width: 50px; height: 50px; text-align: center; bottom: -25px; left: 20px; -webkit-transform: rotate(90deg); -webkit-transform-origin-x: 25px; -webkit-transform-origin-y: 0px; ">
    1
  </div>
</dt>

查看代码隐藏似乎他们依赖-webkit-transform: rotate(270deg);

然后在 IE8 中打开它并使用我看到的开发人员工具进行检查

z-index: 3; position: absolute; text-align: right; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); PADDING-BOTTOM: 0px; padding-left: 10px; width: 330px; padding-right: 20px; display: block; height: 50px; margin-left: 0px; top: 0px; padding-top: 0px; left: 0px; rotation: 270deg; webkittransform: rotate(270deg); WebkitTransformOrigin: 25px 0px; moztransform: rotate(270deg); MozTransformOrigin: 25px 0px; otransform: rotate(270deg); OTransformOrigin: 25px 0px;

这让我大吃一惊：filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

【讨论】：

正在处理这个问题，看起来他们会探测浏览器并插入适当的标签

【解决方案5】：

它为不同的浏览器使用不同的样式：

-moz-transform: rotate(270deg);
-moz-transform-origin: 25px 0px;

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

-webkit-transform: rotate(270deg);
-webkit-transform-origin: 25px 0px;

-o-transform: rotate(270deg);
-o-transform-origin: 25px 0px;

【讨论】：