IE竖排文本问题

Posted 2023-03-04

【中文标题】IE竖排文本问题

【英文标题】：IE Vertical Text Issue

【发布时间】：2015-09-04 12:58:03

【问题描述】：

我目前有一个固定在浏览器右侧并旋转 90 度的反馈选项卡。该选项卡在 Firefox 和 chrome 中看起来不错，但在 IE 中，框会旋转，但文本不会旋转。它是一个非常简单的按钮，可能会有一个我只是想念的非常简单的解决方案。

    #feedback
  color:#FFF;
  position:fixed;
  bottom:200px; right:-56px;
  width:140px; 
  height:35px; 
  line-height:40px;
  background:#727948;
  text-align:center;
  font-size:18px;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  -webkit-box-shadow: 0 8px 6px -6px black;
     -moz-box-shadow: 0 8px 6px -6px black;
          box-shadow: 0 8px 6px -6px black;
  opacity:0.8;
  -webkit-transform: rotate(90deg);/* Safari and Chrome */
  -moz-transform: rotate(90deg); /* Firefox */
  -ms-transform: rotate(90deg); /* ie9 */
  -o-transform: rotate(90deg); /* Opera */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* ie8 */
  writing-mode:tb-rl; /* ie8 */ 


#feedback:hover
  opacity:1;

https://jsfiddle.net/nhf5m4y1/

【参考方案1】：

writing-mode:tb-rl 已弃用，您应该改用writing-mode:vertical-rl。

【讨论】：

感谢您的快速响应，删除写入模式已修复！

【参考方案2】：

删除以下 css：writing-mode: tb-rl;。它是多余的且已弃用。

【参考方案3】：

对于 IE 有-ms-writing-mode: tb-rl;