HTML 표의 세로 (회전) 텍스트


119

HTML 테이블 셀의 텍스트를 90 ° 회전하는 (휴대용) 방법이 있습니까?

(많은 열과 제목에 대한 텍스트가 많은 테이블이 있으므로 공간을 절약하기 위해 세로로 작성하고 싶습니다.)



답변:


105

.box_rotate {
     -moz-transform: rotate(7.5deg);  /* FF3.5+ */
       -o-transform: rotate(7.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
             filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
    }
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>

http://css3please.com/ 에서 가져옴

2017 년부터 앞서 언급 한 사이트는 레거시 Internet Explorer 필터를 삭제하고 현재 표준 transform속성 에 더 많이 의존하도록 규칙 집합을 단순화 했습니다 .

.box_rotate {
  -webkit-transform: rotate(7.5deg);  /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: rotate(7.5deg);  /* IE 9 */
          transform: rotate(7.5deg);  /* Firefox 16+, IE 10+, Opera */
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>


멋져 보입니다. 다양한 브라우저에서 이것이 얼마나 잘 작동하는지 확인해 보겠습니다. ( 90deg물론을 사용하여 ...)
Florian Jenn

9
하지만 한 가지 문제가 있습니다. 테이블 머리글 열이 필요한 경우 회전 후 너비가 증가하지 않으므로 살짝 보이는 것처럼 보입니다 (FF에서 시도) :(
xaralis

3
예, 파이어 폭스에서 (다른 브라우저에 대해 알지 못함) <tr>이 회전되고 나머지 열이 조정되지 않거나, <tr> 안에 <div>를 넣고 설정을 실험 할 수 있습니다. <tr> POSITION을 RELATIVE로, 포함 된 <div>를 ABSOLUTE로, -moz-transform-origin : 0 50 %; 그러면 위치가 수정됩니다. 정확한 너비와 높이를 얻으려면 jquery 또는 다른 것을 사용하여 <tr>의 너비 와 높이를 <div>의 높이 와 너비 로 설정해야 할 수 있습니다 (각각).
Adrian Garner

2
정사각형 셀이있는 경우에만 작동하므로 가로 공간을 절약하지 않습니다
99 문제-구문이 하나가 아닙니다

1
있는 셀이만이 작업 square높이와 너비는 서로 모양과 요소 텍스트 중복을 파괴하는 요소와 함께 회전 다른 회전 후
Rajshekar 레디

35

대체 솔루션?

텍스트를 회전하는 대신 "위에서 아래로"작성하는 것이 작동합니까?

이렇게 :

S  
O  
M  
E  

T  
E  
X  
T  

나는 그것이 훨씬 더 쉬울 것이라고 생각합니다. 텍스트 문자열을 따로 선택하고 각 문자 뒤에 줄 바꿈을 삽입 할 수 있습니다.

이것은 다음과 같이 브라우저에서 JavaScript를 통해 수행 할 수 있습니다.

"SOME TEXT".split("").join("\n")

... 또는 서버 측에서 할 수 있으므로 클라이언트의 JS 기능에 의존하지 않습니다. (이것이 "휴대용"이라는 뜻이라고 생각합니다.)

또한 사용자는 그것을 읽기 위해 머리를 옆으로 돌릴 필요가 없습니다. :)

최신 정보

이 스레드 는 jQuery로 이것을 수행하는 것에 관한 것입니다.


1
왼쪽 / 오른쪽으로 회전하는 레이아웃의 가독성이 떨어지는 것을 보여주는 연구가 있습니다
Édouard Lopez

14

세미콜론 바로 근처에이를 던지는 IE8 줄에 대한 원래 답변과 이전 답변에 인용문이 있습니다. Yikes와 BAAAAD! 아래 코드는 회전이 올바르게 설정되어 있으며 작동합니다. 필터를 적용하려면 IE에서 부동해야합니다.

<div style = "
    왼쪽으로 뜨다; 
    위치 : 상대;
    -moz-transform : rotate (270deg); / * FF3.5 + * /        
    -o- 변환 : rotate (270deg); / * 오페라 10.5 * /   
    -webkit-transform : rotate (270deg); / * Saf3.1 +, 크롬 * /              
    필터 : progid : DXImageTransform.Microsoft.BasicImage (rotation = 3); / * IE6, IE7 * /          
    -ms-filter : progid : DXImageTransform.Microsoft.BasicImage (rotation = 3); / * IE8 * /           
"
> 개수 및 값 </ div>;

5
IE에서 작동하기 위해 float의 필요성을 지적하는 +1.
RET

4

2 시간 넘게 시도한 후 지금까지 언급 한 모든 방법이 브라우저간에 작동하지 않거나 IE에서도 작동하지 않는다고 안전하게 말할 수 있습니다.

예 (최고 찬성 답변) :

 filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */

IE9에서 두 번, 필터에 한 번, -ms-filter에 한 번 회전하므로 ...

언급 된 다른 모든 방법도 작동하지 않습니다. 최소한 표 머리글 셀 (배경색 포함)의 고정 높이 / 너비를 설정하지 않으면 가장 높은 요소의 크기로 자동 조정되어야합니다.

따라서 Nathan Long이 제안한 서버 측 이미지 생성에 대해 자세히 설명하기 위해, 실제로는 범용 적으로 작동하는 유일한 방법 인 제네릭 핸들러 (* .ashx)에 대한 VB.NET 코드 :

Imports System.Web
Imports System.Web.Services


Public Class GenerateImage
    Implements System.Web.IHttpHandler


    Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        'context.Response.ContentType = "text/plain"
        'context.Response.Write("Hello World!")
        context.Response.ContentType = "image/png"

        Dim strText As String = context.Request.QueryString("text")
        Dim strRotate As String = context.Request.QueryString("rotate")
        Dim strBGcolor As String = context.Request.QueryString("bgcolor")

        Dim bRotate As Boolean = True

        If String.IsNullOrEmpty(strText) Then
            strText = "No Text"
        End If


        Try
            If Not String.IsNullOrEmpty(strRotate) Then
                bRotate = System.Convert.ToBoolean(strRotate)
            End If
        Catch ex As Exception

        End Try


        'Dim img As System.Drawing.Image = GenerateImage(strText, "Arial", bRotate)
        'Dim img As System.Drawing.Image = CreateBitmapImage(strText, bRotate)

        ' Generic error in GDI+
        'img.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png)

        'Dim bm As System.Drawing.Bitmap = New System.Drawing.Bitmap(img)
        'bm.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png)

        Using msTempOutputStream As New System.IO.MemoryStream
            'Dim img As System.Drawing.Image = GenerateImage(strText, "Arial", bRotate)
            Using img As System.Drawing.Image = CreateBitmapImage(strText, bRotate, strBGcolor)
                img.Save(msTempOutputStream, System.Drawing.Imaging.ImageFormat.Png)
                msTempOutputStream.Flush()

                context.Response.Buffer = True
                context.Response.ContentType = "image/png"
                context.Response.BinaryWrite(msTempOutputStream.ToArray())
            End Using ' img

        End Using ' msTempOutputStream

    End Sub ' ProcessRequest


    Private Function CreateBitmapImage(strImageText As String) As System.Drawing.Image
        Return CreateBitmapImage(strImageText, True)
    End Function ' CreateBitmapImage


    Private Function CreateBitmapImage(strImageText As String, bRotate As Boolean) As System.Drawing.Image
        Return CreateBitmapImage(strImageText, bRotate, Nothing)
    End Function


    Private Function InvertMeAColour(ColourToInvert As System.Drawing.Color) As System.Drawing.Color
        Const RGBMAX As Integer = 255
        Return System.Drawing.Color.FromArgb(RGBMAX - ColourToInvert.R, RGBMAX - ColourToInvert.G, RGBMAX - ColourToInvert.B)
    End Function



    Private Function CreateBitmapImage(strImageText As String, bRotate As Boolean, strBackgroundColor As String) As System.Drawing.Image
        Dim bmpEndImage As System.Drawing.Bitmap = Nothing

        If String.IsNullOrEmpty(strBackgroundColor) Then
            strBackgroundColor = "#E0E0E0"
        End If

        Dim intWidth As Integer = 0
        Dim intHeight As Integer = 0


        Dim bgColor As System.Drawing.Color = System.Drawing.Color.LemonChiffon ' LightGray
        bgColor = System.Drawing.ColorTranslator.FromHtml(strBackgroundColor)

        Dim TextColor As System.Drawing.Color = System.Drawing.Color.Black
        TextColor = InvertMeAColour(bgColor)

        'TextColor = Color.FromArgb(102, 102, 102)



        ' Create the Font object for the image text drawing.
        Using fntThisFont As New System.Drawing.Font("Arial", 11, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Pixel)

            ' Create a graphics object to measure the text's width and height.
            Using bmpInitialImage As New System.Drawing.Bitmap(1, 1)

                Using gStringMeasureGraphics As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(bmpInitialImage)
                    ' This is where the bitmap size is determined.
                    intWidth = CInt(gStringMeasureGraphics.MeasureString(strImageText, fntThisFont).Width)
                    intHeight = CInt(gStringMeasureGraphics.MeasureString(strImageText, fntThisFont).Height)

                    ' Create the bmpImage again with the correct size for the text and font.
                    bmpEndImage = New System.Drawing.Bitmap(bmpInitialImage, New System.Drawing.Size(intWidth, intHeight))

                    ' Add the colors to the new bitmap.
                    Using gNewGraphics As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(bmpEndImage)
                        ' Set Background color
                        'gNewGraphics.Clear(Color.White)
                        gNewGraphics.Clear(bgColor)
                        gNewGraphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias
                        gNewGraphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias


                        ''''

                        'gNewGraphics.TranslateTransform(bmpEndImage.Width, bmpEndImage.Height)
                        'gNewGraphics.RotateTransform(180)
                        'gNewGraphics.RotateTransform(0)
                        'gNewGraphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.SystemDefault


                        gNewGraphics.DrawString(strImageText, fntThisFont, New System.Drawing.SolidBrush(TextColor), 0, 0)

                        gNewGraphics.Flush()

                        If bRotate Then
                            'bmpEndImage = rotateImage(bmpEndImage, 90)
                            'bmpEndImage = RotateImage(bmpEndImage, New PointF(0, 0), 90)
                            'bmpEndImage.RotateFlip(RotateFlipType.Rotate90FlipNone)
                            bmpEndImage.RotateFlip(System.Drawing.RotateFlipType.Rotate270FlipNone)
                        End If ' bRotate

                    End Using ' gNewGraphics

                End Using ' gStringMeasureGraphics

            End Using ' bmpInitialImage

        End Using ' fntThisFont

        Return bmpEndImage
    End Function ' CreateBitmapImage


    ' http://msdn.microsoft.com/en-us/library/3zxbwxch.aspx
    ' http://msdn.microsoft.com/en-us/library/7e1w5dhw.aspx
    ' http://www.informit.com/guides/content.aspx?g=dotnet&seqNum=286
    ' http://road-blogs.blogspot.com/2011/01/rotate-text-in-ssrs.html
    Public Shared Function GenerateImage_CrappyOldReportingServiceVariant(ByVal strText As String, ByVal strFont As String, bRotate As Boolean) As System.Drawing.Image
        Dim bgColor As System.Drawing.Color = System.Drawing.Color.LemonChiffon ' LightGray
        bgColor = System.Drawing.ColorTranslator.FromHtml("#E0E0E0")


        Dim TextColor As System.Drawing.Color = System.Drawing.Color.Black
        'TextColor = System.Drawing.Color.FromArgb(255, 0, 0, 255)

        If String.IsNullOrEmpty(strFont) Then
            strFont = "Arial"
        Else
            If strFont.Trim().Equals(String.Empty) Then
                strFont = "Arial"
            End If
        End If


        'Dim fsFontStyle As System.Drawing.FontStyle = System.Drawing.FontStyle.Regular
        Dim fsFontStyle As System.Drawing.FontStyle = System.Drawing.FontStyle.Bold
        Dim fontFamily As New System.Drawing.FontFamily(strFont)
        Dim iFontSize As Integer = 8 '//Change this as needed


        ' vice-versa, because 270° turn
        'Dim height As Double = 2.25
        Dim height As Double = 4
        Dim width As Double = 1

        ' width = 10
        ' height = 10

        Dim bmpImage As New System.Drawing.Bitmap(1, 1)
        Dim iHeight As Integer = CInt(height * 0.393700787 * bmpImage.VerticalResolution) 'y DPI
        Dim iWidth As Integer = CInt(width * 0.393700787 * bmpImage.HorizontalResolution) 'x DPI

        bmpImage = New System.Drawing.Bitmap(bmpImage, New System.Drawing.Size(iWidth, iHeight))



        '// Create the Font object for the image text drawing.
        'Dim MyFont As New System.Drawing.Font("Arial", iFontSize, fsFontStyle, System.Drawing.GraphicsUnit.Point)
        '// Create a graphics object to measure the text's width and height.
        Dim MyGraphics As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(bmpImage)
        MyGraphics.Clear(bgColor)


        Dim stringFormat As New System.Drawing.StringFormat()
        stringFormat.FormatFlags = System.Drawing.StringFormatFlags.DirectionVertical
        'stringFormat.FormatFlags = System.Drawing.StringFormatFlags.DirectionVertical Or System.Drawing.StringFormatFlags.DirectionRightToLeft
        Dim solidBrush As New System.Drawing.SolidBrush(TextColor)
        Dim pointF As New System.Drawing.PointF(CSng(iWidth / 2 - iFontSize / 2 - 2), 5)
        Dim font As New System.Drawing.Font(fontFamily, iFontSize, fsFontStyle, System.Drawing.GraphicsUnit.Point)


        MyGraphics.TranslateTransform(bmpImage.Width, bmpImage.Height)
        MyGraphics.RotateTransform(180)
        MyGraphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.SystemDefault
        MyGraphics.DrawString(strText, font, solidBrush, pointF, stringFormat)
        MyGraphics.ResetTransform()

        MyGraphics.Flush()

        'If Not bRotate Then
        'bmpImage.RotateFlip(System.Drawing.RotateFlipType.Rotate90FlipNone)
        'End If

        Return bmpImage
    End Function ' GenerateImage



    ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property ' IsReusable


End Class

이 부분이

        Using msTempOutputStream As New System.IO.MemoryStream
            'Dim img As System.Drawing.Image = GenerateImage(strText, "Arial", bRotate)
            Using img As System.Drawing.Image = CreateBitmapImage(strText, bRotate, strBGcolor)
                img.Save(msTempOutputStream, System.Drawing.Imaging.ImageFormat.Png)
                msTempOutputStream.Flush()

                context.Response.Buffer = True
                context.Response.ContentType = "image/png"
                context.Response.BinaryWrite(msTempOutputStream.ToArray())
            End Using ' img

        End Using ' msTempOutputStream

대체 가능

img.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png)

개발 서버에서 작동하기 때문에 Windows 2003 IIS 6 서버에 배포하는 경우 동일한 코드가 Generic GDI + 예외를 발생시키지 않는다고 가정하는 것은 매우 잘못되었습니다.

다음과 같이 사용하십시오.

<img alt="bla" src="GenerateImage.ashx?no_cache=123&text=Hello%20World&rotate=true" />

그러나 이것은 보편적으로 이식 할 수없는 VB.NET에 따라 다릅니다. (하지만 적어도 문제는 클라이언트에서 서버로 이동합니다.)
Florian Jenn

@Florian Jenn : 음, 예, VB.NET 코드는 VB.NET에 따라 다르지만 PHP, Phyton 또는 Ruby 등을 사용하여 동일한 작업을 수행 할 수 있습니다. :) 그건 그렇고, C #으로 변환하면 모노에서 실행할 수 있습니다. Linux 또는 Mac 또는 Solaris.
Stefan Steiger 2013 년

4

커뮤니티에 대한 나의 첫 번째 기여, 예를 들어 html과 css 만 사용하여 간단한 텍스트와 표의 헤더를 회전하는 것입니다.

여기에 이미지 설명 입력

HTML

<div class="rotate">text</div>

CSS

.rotate {
  display:inline-block;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

여기 jsfiddle의 예


현재 jsfiddle 대신 스 니펫 을 사용하는 것이 좋습니다 .
matsjoyce

내가 올바르게 이해한다면, 이것이 Álvaro G. Vicario의 솔루션과 비교하여 최신 CSS 규칙입니까?
Florian Jenn

@matsjoyce 조각은 만들기 사이에이 일을 풀어 버그의 많은 또한 휴식을 가지고 ...
Rajshekar 레디에게

1
이 답변은 사각형 셀 나누기 .. 단지 사각형 셀 작동 jsfiddle.net/a2uxgm44/156
Rajshekar 레디

3

IE 필터 와 CSS 변환 ( SafariFirefox ).

IE의 지원은 가장 오래되었고 Safari는 3.1.2에서 [적어도 일부는?] 지원하며 Firefox는 3.1까지 지원하지 않습니다.

또는 Canvas / VML 또는 SVG / VML의 혼합을 권장합니다. (Canvas는 더 폭 넓은 지원을 제공합니다.)


나는 눈꺼풀 없음에 동의합니다. 지금은 모두 "해킹"입니다. 황금 시간대에는 아직 준비되지 않았습니다.
Diodeus-James MacFarlane

2

다음은 일부 서버 측 처리와 함께 일반 텍스트로 작동하는 것입니다.

public string RotateHtmltext(string innerHtml)
{
   const string TRANSFORMTEXT = "transform: rotate(90deg);";
   const string EXTRASTYLECSS = "<style type='text/css'>.r90 {"
                                 + "-webkit-" + TRANSFORMTEXT
                                 + "-moz-" + TRANSFORMTEXT
                                 + "-o-" + TRANSFORMTEXT
                                 + "-ms-" + TRANSFORMTEXT
                                 + "" + TRANSFORMTEXT
                                 + "width:1em;line-height:1ex}</style>";
   const string WRAPPERDIV = "<div style='display: table-cell; vertical-align: middle;'>";

   var newinnerHtml = string.Join("</div>"+WRAPPERDIV, Regex.Split(innerHtml, @"<br */?>").Reverse());

   newinnerHtml = Regex.Replace(newinnerHtml, @"((?:<[^>]*>)|(?:[^<]+))",
                                 match => match.Groups[1].Value.StartsWith("<")
                                             ? match.Groups[1].Value
                                             : string.Join("", match.Groups[1].Value.ToCharArray().Select(x=>"<div class='r90'>"+x+"</div>")),
                                 RegexOptions.Singleline);
   return EXTRASTYLECSS + WRAPPERDIV + newinnerHtml + "</div>";
}

다음과 같은 것을 제공합니다.

<style type="text/css">.r90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
width: 1em;
line-height: 1ex; 
}</style>
<div style="display: table-cell; vertical-align: middle;">
<div class="r90">p</div>
<div class="r90">o</div>
<div class="r90">s</div>
</div><div style="display: table-cell; vertical-align: middle;">
<div class="r90">(</div>
<div class="r90">A</div>
<div class="r90">b</div>
<div class="r90">s</div>
<div class="r90">)</div>
</div>

http://jsfiddle.net/TzzHy/


1

나는 Font Awesome 라이브러리를 사용하고 있었고 모든 html 요소에 다음 사항을 추가하여 이러한 영향을 미칠 수있었습니다.

<div class="fa fa-rotate-270">
  My Test Text
</div>

귀하의 마일리지가 다를 수 있습니다.


1

또 다른 해결책 :

(function () {

    var make_rotated_text = function (text)
    {
        var can = document.createElement ('canvas');
        can.width = 10;
        can.height = 10;
        var ctx=can.getContext ("2d");
        ctx.font="20px Verdana";
        var m = ctx.measureText(text);
        can.width = 20;
        can.height = m.width;
        ctx.font="20px Verdana";
        ctx.fillStyle = "#000000";
        ctx.rotate(90 * (Math.PI / 180));
        ctx.fillText (text, 0, -2);
        return can;
    };

    var canvas = make_rotated_text ("Hellooooo :D");
    var body = document.getElementsByTagName ('body')[0];
    body.appendChild (canvas);

}) ();

나는 이것이 상당히 엉망이라는 것을 절대적으로 인정하지만 CSS가 부풀어 오르는 것을 피하고 싶다면 간단한 해결책입니다.


0
-moz-transform: rotate(7.5deg);  /* FF3.5+ */
-o-transform: rotate(7.5deg);  /* Opera 10.5 */
-webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=1);  /* IE6,IE7 allows only 1, 2, 3 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; /* IE8 allows only 1 2 or 3*/

0

이것 좀 봐, IE 7에 대한 솔루션을 찾는 동안 이것을 발견했습니다.

CSS 전용 분위기를위한 완전히 멋진 솔루션

soultion 주셔서 감사합니다 aiboy

여기에 링크

그리고 여기에 내가이 링크를 만난 스택 오버플로 링크가 있습니다 meow

         .vertical-text-vibes{

                /* 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;

            }
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.