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

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

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

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

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

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

4 голоса | спросил Fresheyeball 22 J0000006Europe/Moscow 2011, 02:56:48

5 ответов


0

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

Я пишу это изо всех сил, даже не заглядывая в IE7, но у меня дома стоит 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>
ответил JD Smith 30 J000000Saturday11 2011, 00:41:52
0

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

  1. Убедитесь, что вы используете таблицу стилей reset.css, чтобы сбросить все настройки браузера по умолчанию и учесть любые особенности браузера. Это особенно важно в Internet Explorer.
  2. Используйте таблицы только для табличных данных - я не уверен, что содержит остальная часть вашей таблицы, но если не будет строк данных, было бы намного проще использовать контейнер : = 0 =: + ---- с div и p плавали.
  3. Установите ширину и высоту в img.
  4. Используйте CSS img, чтобы проверить, помогает ли это с позиционированием при наведении курсора. Я часто вижу проблемы со скриптами jQuery и взломами браузеров, такими как CSS3 PIE - если вы их используете, попробуйте их удалить.
ответил Tony Webster 22 J0000006Europe/Moscow 2011, 03:07:43
0

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

ответил climboid 31 J000000Sunday11 2011, 06:06:13
0

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

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

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

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

ответил Travis Pessetto 2 PM00000080000000431 2011, 20:18:04
0

очистите кеш браузера, укажите ширину и высоту на изображении

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

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

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

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

ответил braindamage 2 PM00000080000005931 2011, 20:31:59

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132