CSS Rotation & IE: định vị tuyệt đối dường như phá vỡ IE

Tôi đang cố gắng xoay nhiều khối văn bản để chúng được định hướng theo chiều dọc và định vị chúng ở những vị trí rất cụ thể trên sơ đồ sẽ được xem trước và sau đó được in. CSS xoay văn bản rất độc đáo trong IE, FF, thậm chí Opera.CSS Rotation & IE: định vị tuyệt đối dường như phá vỡ IE

Nhưng khi tôi cố định vị trí một phần tử xoay, IE 7 & 8 (không lo lắng về 6) ngắt hoàn toàn và phần tử vẫn ở vị trí ban đầu. Bất kỳ cách nào xung quanh điều này? Tôi thực sự cần kiểm soát pixel đối với vị trí của các nhãn này.

HTML

<div class="content rotate"> 
    <div id="Div1" class="txtblock">Ardvark Avacado<br />Awkward</div> 
    <div id="Div2" class="txtblock">Brownies<br />Bacteria Brussel Sprouts</div> 
    </div>

CSS

div.content { 
    position: relative; 
    width: 300px; 
    height: 300px; 
    margin: 30px; 
    border-top: black 4px solid; 
    border-right: blue 4px solid; 
    border-bottom: black 4px dashed; 
    border-left: blue 4px dashed; } 

.rotate { 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } 

.txtblock { 
    width: auto; 
    position: absolute; 
    } 

#Div1 { 
    left:44px; 
    top:70px; 
    border:red 3px solid; } 

#Div2 { 
    left:13px; 
    top:170px; 
    border:purple 3px solid; }

Nguồn

2010-04-13 doub1ejack

Bất kỳ cơ hội nào bạn có thể cung cấp liên kết trực tiếp? –

Điều này nghe giống như vấn đề tôi đã dành nhiều thời gian. Tôi để lại hai bình luận về Paul Irish blog post chi tiết những phát hiện của tôi. Đây là những gì tôi đã viết:

IE6 và 7: Bạn phải khai báo ít nhất chiều cao hoặc chiều rộng trên div đó là sẽ được được luân chuyển TRƯỚC lọc luân chuyển của bạn xuất hiện trong CSS. Ngay cả khi bạn thực hiện điều này, tuy nhiên, bất kỳ kiểu dáng nào được áp dụng cho div đó SAU bộ lọc xoay xuất hiện trong mã sẽ không được áp dụng. Tương tự như vậy, có vẻ như là đúng đối với bất kỳ kiểu nào cũng được áp dụng cho trẻ em đó là . Kỳ dị.

IE8: Điều này có vẻ không phải là vấn đề. I kiểu được áp dụng thành công cho div (bao gồm tuyên bố chiều cao của nó hoặc chiều rộng lần đầu tiên) sau khi bộ lọc xoay xuất hiện trong mã.

... và nhiều hơn nữa xoay CSS weirdness báo cáo:

Trong IE6 và 7, thậm chí nếu bạn làm theo các quy tắc tôi đã đăng một vài ý kiến lại, bạn sẽ vẫn hoàn toàn phá vỡ trang web của bạn nếu bạn sử dụng nhiều vòng quay bộ lọc cho mỗi tệp CSS bên ngoài. Bạn hoặc phải có các tệp CSS riêng biệt mỗi bộ lọc xoay hoặc chỉ cần thêm mỗi bộ lọc được lồng trong các thẻ kiểu độc đáo của riêng nó trong phần đầu html của bạn. Việc không làm như vậy sẽ chỉ hiển thị đối tượng được quay đầu tiên , nhưng ngay cả điều này cũng sẽ bị mờ và ở góc không chính xác .

Hilariously, loại bỏ các DOCTYPE gây ra tất cả các vòng xoay để render một cách hoàn hảo, vì vậy tôi giả định quirks mode biết làm thế nào để xử lý nhiều xoay lọc? Ngoài ra, với biểu định kiểu phức tạp hơn, nhiều hơn , thậm chí còn có tác dụng phụ khác, nhưng tôi không thể xác định nguyên nhân gây ra những lỗi đó. Anyways ...

Đưa những thông điệp về nhà:

Chỉ sử dụng 1 bộ lọc ms độc quyền: (khi sử dụng cho luân chuyển, ít nhất) mỗi stylesheet bên ngoài. và .. Mỗi bộ lọc xoay trong html của bạn phải là trong bộ thẻ kiểu của riêng nó.

Mặc dù vấn đề của tôi hơi khác một chút, nhưng bạn có thể gặp tình huống tương tự với hai div bên trong đang được cha mẹ quay. Nó đáng để bắn. Ít nhất hãy thử di chuyển delclaration .rotate xuống dưới cùng của biểu định kiểu.

Nguồn

2010-11-04 04:18:18 Masondesu

tôi thấy rằng làm việc này nếu bạn đặt các phép quay trên txtblocks, thay vì trên thùng sơn bên ngoài.

Demo

Nguồn

2010-04-13 15:18:10 graphicdivine

Tôi cũng đã thử điều này. Các mục xoay, nhưng chúng không được hiển thị nhất quán giữa IE và FF. Tôi đang xoay thùng chứa để cố định vị trí đồng nhất. Tôi đã chỉ thấy rằng IE7 dường như xoay các yếu tố hoàn toàn vị trí, và rằng nó là IE8 đang gặp rắc rối. – doub1ejack

Hãy thử mã này:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Centrsource najboljše Ponudbe</title> 
    <style type="text/css"> 
    #content { 
    position: relative; 
    width: 300px; 
    height: 300px; 
    margin: 30px; 
    border-top: black 4px solid; 
    border-right: blue 4px solid; 
    border-bottom: black 4px dashed; 
    border-left: blue 4px dashed; 
    } 

.txtblock { 
display:block; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
    } 


    </style> 
</head> 
<body> 
<div id="content"> 
    <div class="txtblock">Ardvark Avacado<br />Awkward</div> 
</div> 
</body> 

</html>

Bạn đang áp dụng mã để các yếu tố sai. Cũng như tham chiếu đến những người khác để hiểu điều này http://snook.ca/archives/html_and_css/css-text-rotation

Nguồn

2010-04-13 15:22:21 easwee

Cảm ơn, nhưng nó đổ xuống phải không? Vị trí của trẻ em phải liên quan đến cha mẹ của chúng - nghĩa là, chúng sẽ nhận được cùng một vòng quay. Và nếu tôi không thể xoay vòng bố mẹ tôi sẽ phải đặt vòng xoay cho mỗi đứa trẻ ... và đó là một danh sách mệt mỏi. – doub1ejack

Theo như tôi biết bộ lọc: sử dụng javascript làm cơ sở để thực hiện tất cả các phép tính để nó không thực sự css - do đó, thác không áp dụng. Ngoài ra, IE luôn có cách xử lý mọi thứ. P.s .: Đánh dấu là đã giải quyết nếu câu trả lời này đã giúp bạn. – easwee

IE7 không hoạt động của nó !! –

CSS Rotation & IE: định vị tuyệt đối dường như phá vỡ IE

Trả lời

Các vấn đề liên quan