html CrossBrowser垂直CSS文本

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html CrossBrowser垂直CSS文本相关的知识，希望对你有一定的参考价值。

/** 
* Works everywere ( IE7+, FF, Chrome, Safari, Opera )
* Example: http://jsbin.com/afAQAWA/2/
*/
.rotated-text {
    display: inline-block;
    overflow: hidden;
    width: 1.5em;
}
.rotated-text__inner {
    display: inline-block;
    white-space: nowrap;
    /* this is for shity "non IE" browsers
       that dosn't support writing-mode */
    -webkit-transform: translate(1.1em,0) rotate(90deg);
       -moz-transform: translate(1.1em,0) rotate(90deg);
         -o-transform: translate(1.1em,0) rotate(90deg);
            transform: translate(1.1em,0) rotate(90deg);
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
   /* IE9+ */
   -ms-transform: none;
   -ms-transform-origin: none;
   /* IE8+ */
   -ms-writing-mode: tb-rl;
   /* IE7 and below */
   *writing-mode: tb-rl;
}
.rotated-text__inner:before {
    content: "";
    float: left;
    margin-top: 100%;
}

/* mininless css that used just for this demo */
.container {
  float: left;
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="rotated-text"><span class="rotated-text__inner">Easy</span></div>
  </div>
   <div class="container">
    <div class="rotated-text"><span class="rotated-text__inner">Normal</span></div>
     </div>
   <div class="container">
    <div class="rotated-text"><span class="rotated-text__inner">Hard</span></div>
</div>
</body>
</html>

以上是关于html CrossBrowser垂直CSS文本的主要内容，如果未能解决你的问题，请参考以下文章

CSS crossbrowser css shadow

CSS CSS Crossbrowser透明度

CSS Crossbrowser CSS Gradient

CSS 灰度img与css crossbrowser

HTML-CSS 在链接中水平和垂直居中文本

css CrossBrowser简单的CSS3动画