IE垂直文本问题

时间:2015-06-18 18:24:58

标签: html css internet-explorer rotation

我目前有一个反馈标签,固定在浏览器的右侧并旋转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/

2 个答案:

答案 0 :(得分:2)

不推荐使用

writing-mode:tb-rl,而应使用writing-mode:vertical-rl

答案 1 :(得分:1)

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