Internet Explorer ( Обозреватель Интернета ):переполнение и всплывание

StackOverflow https://stackoverflow.com/questions/1641992

Вопрос

У меня есть img внутри div.Я установил img в положение "float:правильно", а div - на "переполнение:скрытый".Поскольку div уже, чем img, я ожидаю, что левая часть img будет обрезана и скрыта, что действительно имеет место в Firefox.Однако IE отказывается признавать "float:свойство img "right", всегда привязывающее img к левой стороне div и отсекающее правую часть img.Есть ли обходной путь для этой проблемы?Или я делаю что-то не так?


** справочная информация

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

эффект слепоты jquery по умолчанию не обрабатывает исчезновение слева направо.Я предполагаю, что причина этого в том, что определенный режим (скрыть противпоказать) и определенные комбинации направления (левый против правого или верхний против нижнего) требуют дополнительного перемещения верхнего левого положения div.Позвольте мне продемонстрировать это на примере.Предположим, мы хотим, чтобы изображение отображалось слева направо с эффектом слепоты.Ну, это просто, мы просто устанавливаем для переполнения div значение hidden, для изображения значение float left, затем изменяем ширину div с 0 на ширину изображения.С другой стороны, если мы теперь хотим, чтобы изображение исчезало слева направо с помощью эффекта слепоты, мы должны установить для изображения значение float right и уменьшить ширину div с ширины изображения до 0, одновременно сдвинув верхний левый угол div вправо, чтобы правый край изображения оставался неподвижным.

Я написал код для включения движений в верхнем левом углу, и он отлично работает в FF, но терпит неудачу в IE.Поскольку IE не будет учитывать значение float: right и вместо этого настаивает на привязке изображения слева, эффект будет таким, как от jquery "slide" вместо анимации "blind".

Это было полезно?

Решение

Вы могли бы попробовать следующее для IE 7:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<div style="overflow: hidden; width: 150px; direction: rtl;">
   <img src="yourimage.png" style="float: right" />
</div>
</body>
</html>

Направление:rtl-стиль работает у меня в IE 8 с использованием стандартного режима IE 7.IE 8, использующий стандарты IE 8, не нуждается в стиле direction.

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

Другие советы

Наихудший случай:переместите белый DIV на левую сторону вашего изображения?Хотя и очень кроссплатформенный.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top