Fatal编程技术网
  • css/
  • 仅限带有CSS的IE7、IE8、IE9和IE10中的垂直文本

仅限带有CSS的IE7、IE8、IE9和IE10中的垂直文本

css

仅限带有CSS的IE7、IE8、IE9和IE10中的垂直文本,css,internet-explorer-10,vertical-text,Css,Internet Explorer 10,Vertical Text,有人知道如何仅使用CSS成功地在IE7、IE8、IE9和IE10中实现垂直文本吗？（通过垂直文本，我指的是逆时针旋转90度的文本） 这是我今天实施的，我认为应该是正确的： .counterclockwise-text { /* Chrome/Safari */ -webkit-transform: rotate(-90deg); -webkit-transform-origin: 50% 50%; /* Firefox */ -moz-transform: rotate(-90deg); -

有人知道如何仅使用CSS成功地在IE7、IE8、IE9和IE10中实现垂直文本吗？（通过垂直文本，我指的是逆时针旋转90度的文本）

这是我今天实施的，我认为应该是正确的：

.counterclockwise-text {

/* Chrome/Safari */
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;

/* Firefox */
-moz-transform: rotate(-90deg);
-moz-transform-origin: 50% 50%;

/* IE9 */
-ms-transform: rotate(-90deg);
-ms-transform-origin: 50% 50%;

/* This should work for IE10 and other modern browsers that do not need vendor prefixes */
transform: rotate(-90deg);
transform-origin: 50% 50%;

/* IE8 or less - using the "\9" CSS hack so that other browsers will ignore these lines */
zoom: 1\9;
writing-mode: tb-rl\9;
filter: flipv fliph;

}
然而，IE10并没有忽略“\9”CSS攻击——它将拾取这些值并将文本再旋转90度。一个有用的解决方案是在IE8及以下版本中创建垂直文本，而IE10不会采用这种方法。我真的希望避免使用仅限IE8的样式表，或者使用媒体查询来检测IE10。我只是在寻找一种方法来修改上面的CSS，使其在所有浏览器中都具有垂直文本。谢谢大家!

编辑：

值得一提的是，我还尝试了下面使用过滤器旋转文本的代码。这可能适用于大多数情况，但在我的实例中，许多文本被包装元素的限制（非旋转？）约束截断

.counterclockwise-text {

/* Chrome/Safari */
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;

/* Firefox */
-moz-transform: rotate(-90deg); 
-moz-transform-origin: 50% 50%;

/* IE9 */
-ms-transform: rotate(-90deg);
-ms-transform-origin: 50% 50%;

/* IE10 and other modern browsers that do not need vendor prefixes */
transform: rotate(-90deg);
transform-origin: 50% 50%;

/* IE8 */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

/* IE7 or less */
*zoom: 1;
*writing-mode: tb-rl;
*filter: flipv fliph;

}
对于IE10和IE8都很满意的纯CSS，我仍然没有找到一种方法来实现这一点。

对于较旧的IE，应该使用条件注释。
这就是它们的用意，它不会造成伤害，也不会攻击（头部）s:）

这里是纯CSS（每个文本增加1个div）解决方案

适用于所有IE版本IE7-10

/** 
 * Works everywere ( IE7+, FF, Chrome, Safari, Opera )
 */
.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 doesn'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;
}
HTML示例

<!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>


JS-Bin
容易的
正常的
硬的
来源：

有同样的问题，但由于旋转文本的可读性较差，我建议不要使用：

filter:progid:DXImageTransform.Microsoft.BasicImage（旋转=3）

对于IE9或IE8

这就是对我有用的东西：


p.css-vertical-text {
    color:#333;
    border:0px solid red;
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:20px;
    height:20px;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
    font-size:24px;
    font-weight:normal;
    text-shadow: 0px 0px 1px #333;
}



从
我了解到，整体而言，条件注释可能是一个更好的解决方案，但我要求使用纯CSS的解决方案。效果很好。我测试了IE5，IE7-IE11。