在Safari中工作的垂直文本

Question

我试图在网页中显示垂直文本。我让它在所有浏览器中工作，包括用于Windows的Safari 5，但它在Mac上的Safari 6中不工作。在Safari 6中，内部div中没有出现文本。我如何使它在Safari 6中工作，并且仍然在其他浏览器中工作？

下面是HTML：

<table  class="dashboard-table-rotating">
  <tr>
    <th class="dashboard-header-cell">
      <div class="vertical-text">
        <div class="vertical-text-inner">Goals, Objectives, Priorities</div>
      </div>
    </th>
  </tr>
</table>

下面是CSS：

.dashboard-table-rotating th {
  border: thin solid #000000;
  text-align: center;
  vertical-align: bottom;
}

.vertical-text {
  display: inline-block;
  overflow: hidden;
  width: 3em;
  text-align: left;
}

.vertical-text-inner {
  display: inline-block;
  white-space: nowrap;
  line-height: 1.5;
  transform: translate(0px,100%) rotate(-90deg);
  -webkit-transform: translate(0px,100%) rotate(-90deg);
  transform-origin: 0 0;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /*Only used for Safari*/
 ::i-block-chrome,.vertical-text-inner {
    padding-top: 15px;   
    -webkit-transform: rotate(-90deg);
  }
}

Answer 1

我只需要简化一些事情。它起作用了：

<table class="dashboard-table-rotating">
  <tr>
    <th>
      <div class="vertical-header">
        Goals, Objectives, Priorities
      </div>
    </th>
  </tr>
</table>

CSS：

.vertical-header {
  -moz-transform: rotate(-90.0deg); /* FF3.5+ */
  -ms-transform: rotate(-90.0deg); /* IE9+ */
  -o-transform: rotate(-90.0deg); /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg); /* Safari 3.1+, Chrome */
  transform: rotate(-90.0deg); /* Standard */
  width:32px;
  white-space:nowrap;
}

.dashboard-table-rotating th {
  border: thin solid #000000;
  text-align: center;
  vertical-align: bottom;
  padding-left: 8px;
}

Answer 2

检查一下这个小提琴

http://jsfiddle.net/wzr4crfr/4/

CSS

.dashboard-table-rotating th {
  border: thin solid #000000;
  text-align: center;
  vertical-align: bottom;
    width: 40px;
position: absolute;
}

.vertical-text {
  display: table;
  overflow: hidden;
  text-align: left;
}

.vertical-text-inner {
  display: table-cell;
  white-space: nowrap;
  line-height: 1.5;
  transform: translate(0px,100%) rotate(-90deg);
  -webkit-transform: translate(0px,100%) rotate(-90deg);
  transform-origin: 0 0;
}

我不确定你的问题是怎么解决的，因为我没有旅行。