Scale Iframe Содержание в IE 7 + 8

Я пытаюсь масштабировать содержимое фрейма во всех браузерах, включая IE> = 7, но он не работает ниже 9.Scale Iframe Содержание в IE 7 + 8

Я изменил код с этого поста для размеров Я думаю, мне нужно и хочу разместить стандартную страницу шириной 960 пикселей в нем. How can I scale the content of an iframe?

http://www.carsonfarmer.com/2012/08/cross-browser-iframe-scaling/

 #wrap { 
      width: 410px; 
      height: 426px; 
      padding: 0; 
      overflow: hidden; 
      border:1px solid #ccc; 
      box-shadow: 0px 0px 3px #333; 
     } 
     #frame { 
      -ms-zoom: 0.5; 
      -ms-transform-origin: 0 0; 
      -moz-transform: scale(0.5); 
      -moz-transform-origin: 0px 50px; 
      -o-transform: scale(0.5); 
      -o-transform-origin: 0px 50px; 
      -webkit-transform: scale(0.5); 
      -webkit-transform-origin: 0 0; 
     } 
     #frame { 
      width: 950px; 
      height: 1000px; 
      border: 0; 
      overflow: hidden; 
     }

В IE 8 содержание слишком мал для контейнера, и я получаю некоторые скроллбары. В IE 7 содержимое не масштабируется.

http://jsfiddle.net/t2GPm/

источник

2013-07-01 BillPull

Я могу ответить на вопрос о том, почему IE7 не масштабируется на всех:

-ms-zoom: 0.5;

выше линия будет работать в IE8, но не в IE7, потому что IE7 не признает -ms- префикс. Префиксные стили были введены только в IE8.

Вы можете исправить это в IE7, указав не префиксную версию стиля zoom. Однако это не полный ответ, потому что zoom также поддерживается Chrome и Safari; вы, вероятно, не хотите использовать его в этих браузерах, поскольку используете для них transform.

Да, это сложная проблема. Учитывая вышеизложенное, ваши лучшие варианты заключаются в использовании условных комментариев, чтобы сделать свойство zoom специфичным для IE (существуют различные способы достижения этого).

Другой вариант, конечно же, - просто отказаться от поддержки IE7. Честно говоря, это неплохая идея; у него много важных проблем и быстро уменьшается количество пользователей. (все статистические данные, которые я видел недавно, говорят, что теперь у пользователей меньше пользователей, чем у IE6)

В целом важно знать, что zoom - это не то же самое, что масштабирование с использованием transform. zoom фактически не масштабирует элемент; он масштабирует его. Различие является тонким, но имеет значение, особенно в отношении компоновки элементов вокруг коробки, zommed/scaled, и может объяснить проблемы с полосой прокрутки, которые у вас есть в IE8.

Из-за этого zoom может и не быть тем, чем вы хотите заниматься. Вы используете его, потому что старые версии IE не поддерживают transform, но есть другие способы получить старые версии IE для масштабирования элемента. Одним из вариантов является использование фирменного стиля filter. Это некрасиво, но это лучше подходит для того, что вы пытаетесь сделать. Попробуйте это:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', 
    M11=1.5320888862379554, M12=-1.2855752193730787, 
    M21=1.2855752193730796, M22=1.5320888862379558);

(выше кода, взятого из here)

Другим вариантом является использование 'polyfill' библиотеки Javascript, такие как CSS Sandpaper. Эта библиотека позволяет использовать стандартный синтаксис CSS для transform в старых версиях IE, которые его не поддерживают. Под капотом он использует тот же стиль filter, описанный выше, но, предоставляя вам возможность использовать стандартный код, он делает ваш CSS намного опрятным.

Немного отстранившись от первоначальных вопросов, но пока мы говорим о префиксах поставщиков, я отмечаю, что вы также не указали неподписанную версию стиля transform. При использовании префиксных стилей важно также указать вариант без префикса, чтобы его можно было подобрать полностью совместимыми со стандартами браузерами, а поскольку браузеры, которые ранее использовали префикс, могут отказаться от поддержки префикса после того, как стандарт будет хорошо установлен.

В зависимости от поддержки версии вам может потребоваться отбросить некоторые атрибуты prefixed - firefox не нуждался в ней с версии 16 для преобразований. Более подробную информацию об этом можно найти на странице CanIUse.com.

Надеюсь, что это поможет.

источник

2013-07-01 21:30:03 Spudley

Scale Iframe Содержание в IE 7 + 8

ответ

Смежные вопросы