В IE 8/9 - не удается щелкнуть изображение внутри привязки, которое обернуто span с помощью display:block

#html #css #internet-explorer

#HTML #css #internet-explorer

Вопрос:

У меня небольшая проблема с созданием элемента навигации — он отлично работает в firefox, но, похоже, вызывает у меня головную боль в IE8 / IE9. Другая странность заключается в том, что он отлично работает в IE при запуске под localhost, но не при запуске на сервере.

Я попытался сузить фактическую проблему, и, похоже, это вызвано тем, что я поместил пару элементов (img и некоторый текст) в span, который имеет display:block . Когда я делаю это, изображение больше не реагирует на href javascript тега привязки. Его сложно объяснить, поэтому я включил сокращенный пример:

 <a title="My Link" href='javascript:alert(1);' style="display: block; height: 37px; text-decoration: none;">
    <span style="display: block; height: 34px;">
        <img title="My Icon" src="mypic.png" alt="ss" />
        <span>Link Text</span>
    </span>
</a>

Любая помощь была бы отличной!

Мэтт

1. У меня нет проблем при тестировании вашего кода, я полагаю, вы использовали плавающий на одном из элементов?

2. В моем реальном проекте изображение перемещается, но я воспроизводю эту проблему без каких-либо перемещений. С точным кодом выше я не могу щелкнуть по изображению в IE — если я запускаю его из файловой системы или локального хоста, он работает просто отлично, но если я запускаю его на сервере, я не могу щелкнуть по нему.

Ответ №1:

Другая странность заключается в том, что он отлично работает в IE при запуске под localhost, но не при запуске на сервере.

В этом случае проблема связана с режимом рендеринга, который использует IE. Нажмите F12, чтобы вызвать инструменты разработчика, чтобы увидеть, какой режим используется.

Добавление этого к вашему <head> должно решить проблему:

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

1. Блестяще — это отсортировало его! Как вы упомянули, он не работал в режиме совместимости с IE. Спасибо!!

2. Ну, на самом деле это просто заставит пользователей использовать последнюю версию IE. Поэтому, если они посещают в более старом браузере, проблема сохраняется.

3. @bsthomsen: Верно, но OP хотел знать, почему эта проблема возникла в IE8 / 9 . Очевидно, его не волновали древние версии, такие как IE7.