Почему IE7 перемещает элементы DOM при наведении мыши? - PullRequest
Новая
       7

Почему IE7 перемещает элементы DOM при наведении мыши?

4 голосов
/ 22 июня 2011

Итак, у меня есть таблица только с двумя столбцами и одной строкой. Второй тд содержит изображение, а первый содержит текст. Я хотел бы, чтобы тд, содержащий изображение, было минимального размера, с которым это изображение было внутри, и первый тд для заполнения оставшегося пространства. Следующее работает во всех браузерах, кроме IE7 (мы не делаем IE6):

<table> <tr><td style="width:100%;">TEXT</td><td><img src="jpg" alt="jpg" /></td></tr> </table>

Что происходит, это: Страница отображается правильно, затем, когда вы наводите курсор мыши на таблицу, первый тд расширяется, чтобы заполнить всю таблицу, отталкивая изображение от края.

Я мог бы исправить это с помощью некоторого jQuery для измерения ширины изображения и вычисления остатка для первого тд; но это решение полно LAME!

Пожалуйста, помогите. Я не понимаю, почему IE7 чувствует необходимость перерисовать так, как он делает.

Ответы [ 5 ]

2 голосов
/ 30 июля 2011

Попробуйте использовать следующий код.Вместо того, чтобы явно объявлять слишком большую ширину, попробуйте явно объявить слишком мало (поскольку изображение все равно будет увеличивать ширину более 1%.)но у меня дома есть виртуальная машина IE7, поэтому я прокомментирую позже, если найду другое решение. 

<table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>TEXT</td>
<td width="1%" style="width: 1%;"><img src="http://www.google.com/intl/en_com/images/srpr/logo2w.png" alt="Google Logo" /></td>
</tr>
</table>
1 голос
/ 31 июля 2011

Попробуйте установить style="zoom:1" для элемента.

1 голос
/ 22 июня 2011

Есть несколько вещей, которые вы можете попробовать:

  1. Убедитесь, что вы используете таблицу стилей reset.css, чтобы сбросить все настройки браузера по умолчанию и учесть любые особенности браузера.Это особенно важно с Internet Explorer.
  2. Используйте таблицы только для табличных данных - я не уверен, что содержит остальная часть вашей таблицы, но если не будет строк данных, было бы намного проще использоватьконтейнер div с плавающими p и img.
  3. Установите ширину и высоту на img.
  4. Используйте CSS position: relative; float: left;, чтобы увидеть, помогает ли это свопросы позиционирования при наведении.Я часто вижу проблемы со скриптами jQuery и взломами браузеров, такими как CSS3 PIE - если вы их используете, попробуйте удалить их.
0 голосов
/ 02 августа 2011

очистить кеш браузера, указать ширину и высоту для вашего изображения

Я видел самые странные вещи на ie7, такие как разрывы страниц \ n и такие, вызывающие этот эффект, а именно:

<a href="#>
<img src="jpg" />
</a>

чтобы исправить, просто поместите все в одну строку и без пробелов (например, в таблице с пробелом справа)

также избегайте использования встроенного стиля, используйте таблицу стилей (css)

0 голосов
/ 02 августа 2011

Я не уверен, но смотрю на 

<table> <tr><td style="width:100%;">TEXT</td><td><img src="jpg" alt="jpg" /></td></tr> </table>

Из того, что я вижу, нет таблицы ширины, поэтому IE не знает, как правильно масштабировать td.

Другое предположение состоит в том, что вы объявляете ширину как 100% на первом, который IE интерпретирует как отклонение. Как я полагаю, вы не можете иметь ширину 100% в первой ячейке, поскольку это означает, что она занимает 100% полной ширины таблицы.

...