Текст не будет обтекать изображение в IE8 - PullRequest
Новая
       10

Текст не будет обтекать изображение в IE8

2 голосов
/ 23 апреля 2011

У меня есть изображение бланка с анимированным текстом, которое оборачивается вокруг него. В Chrome, Safari и Firefox текст переносится корректно, но в IE8 текст не переносится. Весь текст отображается как один большой блок. 

<img src="someimage.png" width="200" height="200" align="left"/>
<div class="animate active">
    <h1>First Header</h1>
    <p>Lorem Ipsum is awesome</p>
    <h2>Second Header</h2>
    <p>More epic Latin</p>
</div>
<div class="animate">
<h1>First Header</h1>
    <p>Lorem Ipsum is awesome</p>
    <h2>Second Header</h2>
    <p>More epic Latin</p>
</div>

JQuery переключает отображение с помощью fadeIn с display: none to display: block. Отображение div-ов как встроенных исправляет проблему, но я не могу оживить ее с помощью простого.

1 Ответ

1 голос
/ 23 апреля 2011

Я могу сказать вам, почему, но не как это исправить - хотя я все еще ищу, чтобы найти оптимальное решение.

все эти функции jQuery, которые fadeIn, fadeOut и fadeTo нужен фильтр MS (непрозрачность), чтобы jQuery применил что-то вроде этого (хотя он делает это встроенным): 

.active {
  zoom: 1;
  filter: ;
}

A Фильтр Microsoft не будет работать без hasLayout сработал в true, поэтому он, jQuery, добавляет zoom: 1; одновременно.Как только вы устанавливаете hasLayout=true для элемента рядом с плавающей точкой, вы запускаете «плавающую» модель IE, которая показывает, как вы описываете, текст не переносится!

это происходит в каждой версии IE до сих пор.(примечание: не уверен насчет 9)

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

Я пробовал несколько вещей, включая использование нотации -ms-filter и могуне найдете ничего, что будет работать, если эффект можно будет сделать только с помощью opacity Я думаю, вы не найдете ничего 

The jQuery toggles the display via fadeIn from display:none to display:block.

Это не только так - если это всетогда это сработает, как только включится «фильтр», у вас возникнет эта проблема

код для тестирования: 

img {
float: left;
width: 200px;
height: 200px;
}

.active {
zoom: 1;
/*filter: alpha(opacity=50); /* uncomment this to see it happen in IE8 too */

/*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - also tried but the effect was the same*/
}

HTML: 

<img src="someimage.png" />
<div class="active">
    <h1>Long div Header</h1>
    <p>Lorem Ipsum is awesome</p>
    <h2>Second Header</h2>
    <p>More epic Latin</p>
    <h1>First Header</h1>
    <p>Lorem Ipsum is awesome</p>
    <h2>Second Header</h2>
    <p>More epic Latin</p>
</div>
...