【问题标题】:IE Vertical Text IssueIE竖排文本问题
【发布时间】: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/

【问题讨论】:

    标签: html css internet-explorer rotation


    【解决方案1】:

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

    【讨论】:

    • 感谢您的快速响应,删除写入模式已修复!
    【解决方案2】:

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

    【讨论】:

      【解决方案3】:

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2023-03-20
        • 2012-02-06
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-11-30
        • 2020-04-19
        相关资源
        最近更新 更多