#jquery #css #internet-explorer #html
#jquery #css #internet-explorer #HTML
Вопрос:
Я разработал веб-сайт для клиента и создал его для них. Он почти завершен (ну, он завершен, если вы посмотрите на него с помощью Chrome или Firefox).
Часть дизайна показывает своего рода фотографию polaroid в верхнем левом углу экрана под углом. Он состоит из Div и изображения. Код на данный момент заставляет div наклоняться под углом, в то время как изображение внутри изменяется.
Однако код, используемый:
transform: rotate(-7deg);
-webkit-transform: rotate(-7deg); /* Safari and Chrome */
-o-transform: rotate(-7deg); /* Opera */
-moz-transform: rotate(-7deg); /* Firefox */
Не работает ни в одной версии Internet Explorer. Клиент, хотя и использует Internet Explorer, доставляет мне массу огорчений, потому что они действительно хотят, чтобы это выглядело так. (Этот клиент, кстати, является типичным типом пользователя «форма над функцией»).
Что я мог бы сделать, чтобы div наклонялся под углом?
Редактировать:
Я использовал плагин CssSandpaper, и он делает то, что мне нужно, вплоть до определенного момента.
Здесь вы можете видеть, что изображение озаглавлено так, как мне нужно. Однако с помощью плагина cycle, который я использую, при изменении изображения оно исчезает, а затем появляется снова. Я не знаю, что это вызывает?
Ответ №1:
IE8 и ниже не поддерживают rotate
свойство. Итак, для этого вам нужно использовать IE filter
, называемый matrixfilter
попробуйте это :
/* IE8 - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.992546151641322, M12=0.12186934340514761, M21=-0.12186934340514761, M22=0.992546151641322, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.992546151641322,
M12=0.12186934340514761,
M21=-0.12186934340514761,
M22=0.992546151641322,
SizingMethod='auto expand');
и вы можете сгенерировать filter
отсюда:
http://www.useragentman.com/IETransformsTranslator/index.html
Комментарии:
1. Я пробовал это, и это сработало до определенной степени. Как я уже сказал, изображения внутри div, которые необходимо наклонить, являются частью слайд-шоу. В данный момент с матричным кодом изображение отображается без наклона, затем оно наклоняется.
2. можете ли вы показать свой html и css-код. Итак, легко понять, чего вы хотите.