Печать веб-страницы с повернутым текстом в Internet Explorer 9 - PullRequest
Новая
       31

Печать веб-страницы с повернутым текстом в Internet Explorer 9

1 голос
/ 24 октября 2011

ОК, так что я полностью изменил этот вопрос, давайте покончим с этим.Попробуйте эту ссылку: Печать повернутого текста кросс-браузер (он содержит именно тот исходный код, который указан ниже)

Вы увидите красный текст с блблабла с синей рамкой, повернутой на 90 градусов по часовой стрелке.

Теперь моя проблема для любого пользователя IE9, зайдите на мой сайт или используйте этот код ниже.Как вы можете видеть в предварительном просмотре печати: контекстное меню -> «Предварительный просмотр печати ...», вращение не выполняется!(И, конечно, цвета фона теряются, но это нормально)

И я ЗНАЮ, что можно напечатать, например, 35 градусов, повернутый текст, я получил пример этого, но он содержит многодерьмо код CSS, так что я не смог выяснить, что отличается в этом примере.

Кто-нибудь может увидеть, что очевидное, что я здесь упускаю? 

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.testRotation
{
  width: 200px;
  height: 16px;
  background-color: red;
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand');
  -moz-transform:rotate(270deg) translate(-200px,0px);
  -moz-transform-origin: 0% 0%;
  -webkit-transform: rotate(270deg) translate(-200px,0px);
  -webkit-transform-origin: 0% 0%;
  -o-transform: rotate(270deg) translate(-200px,0px);
  -o-transform-origin: 0% 0%;
  transform: rotate(270deg) translate(-200px,0px);
  transform-origin: 0% 0%;
  zoom: 1;
  position: absolute;
  left: 20px;
  top: 100px;
  margin: 10px;
}
</style>
</head>

<body>
<div style="position: absolute; width: 16px; height: 200px;left: 25px; top: 105px; background-color: green; border-style: solid; border-width: 5px; border-color: blue;word-wrap: break-word;">
TARGET
</div>
<div class="testRotation">
BLABLABLABLABLA
</div>

</body>
</html>

1 Ответ

2 голосов
/ 25 октября 2011

ОК, поэтому я нашел ответ, и 'duri' был немного прав с его -ms-преобразованием.Но я не видел смысла в использовании -ms-transform для перекрестного браузера css для поворота текста.И самая причина в этом:

в IE9 кажется, что вы можете просто вращать текст с помощью -ms-transform или filter: progid:DXImageTransform.Microsoft.Matrix().НО, когда вы собираетесь распечатать веб-страницу, как в context menu -> Print preview..., атрибут фильтра css больше не применяется, и используется -ms-transform.

Таким образом, чтобы иметь настоящее решение для кросс-браузеров CSS, этопечатает повернутые вещи, которые вы ДОЛЖНЫ использовать (как в моем примере): 

-ms-transform: rotate(270deg) translate(-200px,0px);;
-ms-transform-origin: 0% 0%;

РЕДАКТИРОВАТЬ: ОСТОРОЖНО!Теперь я попытался применить -ms-transform, но снова возникает новая проблема ... Потому что теперь я использую следующий скрипт: 

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand');
-ms-filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand');
-moz-transform:rotate(270deg) translate(-200px,31px);-moz-transform-origin: 0% 0%;
-webkit-transform: rotate(270deg) translate(-200px,31px);-webkit-transform-origin: 0% 0%;
-o-transform: rotate(270deg) translate(-200px,0px);-o-transform-origin: 0% 0%;
-ms-transform: rotate(270deg) translate(-200px,0px);-ms-transform-origin: 0% 0%;
transform: rotate(270deg) translate -200px,0px);transform-origin: 0% 0%;
zoom: 1;

Это должно вращать элемент во всех браузерах .. За исключением IE9.Потому что он будет одновременно распознавать -ms-фильтр для поворота и будет использовать фильтр для поворота.

Так что единственное возможное решение, о котором я могу подумать сейчас, - это взломать фильтр, чтобы в IE9не будет работать с фильтром. Есть ли вообще способ вращать элемент во всех браузерах IE без использования CSS-хаков?Дайте мне знать, я не нашел ни одного ...

Например, проверьте css3please.com, он утверждает, что имеет перекрестный код для поворота.Ну, это не так, измените значения на 270 градусов и адаптируйте матрицу преобразования.И вы увидите, что в IE9 текст будет перевернут (180 градусов) вместо поворота на 270 градусов.

...