IE6 Bug - Div внутри тега привязки: встроенные изображения не ссылки

Question

Я пытаюсь сделать так, чтобы все в теге привязки было активной ссылкой.К сожалению, в IE6 (который является единственным браузером, которым я сейчас занимаюсь), единственное, что не является кликабельной ссылкой, это встроенные изображения.Я знаю, что это недопустимый html, чтобы поместить div внутри якоря, но это не моя разметка, и меня попросили не менять его.Любые предложения по изменению CSS, чтобы включить изображения в виде кликабельных ссылок?Если изменение разметки - единственное решение ... есть предложения?Сначала я хотел установить изображение в качестве фона своего родителя (.ph-item-featured-img), хотя я не уверен, что это решит проблему.

Спасибо!

<div class="tab-panel-init  clear  ui-tabs-panel ui-widget-content ui-corner-bottom" id="ph-flashlights">

        <a href="#" class="last ph-item-featured clear">
            <div class="ph-item-featured-img">
                <img src="#">
                &nbsp;
            </div>
            <strong>
                PRODUCT CODE
            </strong>
            <p>
                PRODUCT CODE Heavy Duty Aluminum Led Flashlight
            </p>
            <span>Learn more &gt;</span> </a>

        <a href="#" class="last ph-item-featured clear">
            <div class="ph-item-featured-img">
                <img src="#">
                &nbsp;
            </div>
            <strong>
                PRODUCT CODE
            </strong>
            <p>
                PRODUCT CODE Heavy Duty Aluminum Led Flashlight
            </p>
            <span>Learn more &gt;</span> </a>

    </div>

Answer 1

Проблема в том, что это недействительный HTML.Объясните, что вы должны изменить разметку, чтобы она работала по вашему желанию.Изменение div на span и установка класса .ph-item-featured-img в display: block должны создать тот же внешний вид и быть верным html.

Edit : Другой, не такой чистыйРешение заключается в том, чтобы добавить прослушиватель кликов с помощью JavaScript и вызвать ссылку при нажатии на изображение.

Answer 2

Вам следует пересмотреть вопрос об изменении разметки.Этот пример плох по многим причинам, он может служить примером того, чего не следует делать в учебнике.

Альтернативные стратегии:

• Удалите все, кроме изображения, и обработайте его нажатием кнопки мыши.это делает механику связи.
• Удалите DIV и просто поместите IMG внутри тега привязки.
• и т. д.

Answer 3

Если вы не можете изменить наценку (что, по вашему мнению, недействительно), я не думаю, что вы можете здесь что-либо сделать.

Answer 4

Это то, что w3c валидатор возвращает, когда я передаю опубликованный вами фрагмент:

Строка 15, столбец 46: тип документа не допускает использование элемента «DIV»; отсутствует один из тегов "OBJECT", "MAP", "BUTTON"

       <div class="ph-item-featured-img">

Упомянутый элемент не может появляться в контексте, в котором вы его поместили; другие упомянутые элементы являются единственными, которые разрешены там и могут содержать упомянутый элемент. Это может означать, что вам нужен содержащий элемент, или, возможно, вы забыли закрыть предыдущий элемент. Одной из возможных причин этого сообщения является попытка поместить элемент уровня блока (например, "<p>" или "<table>") внутри встроенного элемента (например, "<a>", "<span>). ", или" <font> ").

Если я правильно помню, IE6 требует, чтобы каждый элемент внутри тега <a> был элементом с установленным на нем CSS display: inline (или встроенными элементами по умолчанию, такими как <span>, <b>, <strong> и т. Д.), Иначе ссылки не будут связаны, или ссылки будут странными.

Возможно, виноват даже HTML-парсер IE6. Возможно, он видит <img src="#"> и думает: «Это недопустимый URL-адрес изображения!: Ignore:». IE6 странно в этом смысле, часто действует диаметрально противоположно тому, как работают совместимые со стандартами браузеры.

Правда в том, что у меня нет возможности проверить все это; К счастью, на каждом компьютере с Windows, к которому у меня есть доступ, есть IE7 +. Возможно, вам следует взять маршрут Google и прямо сказать, что вы не собираетесь поддерживать IE6, перенаправив все браузеры IE6 в место, где они могут обновиться.

Я полагаю, что вы можете сделать это с условными комментариями примерно так:

<html>
    <head>
<!--[if lte IE 6]>
        <meta http-equiv="refresh"
         content="2;url=http://www.microsoft.com/windows/internet-explorer/default.aspx" />
<![endif]-->
    ...
    </head>

Answer 5

Ну, я выгляжу так, как будто вы уже используете jQueryUI, так почему бы просто не щелкнуть мышью по содержащему DIV.Также вы должны обязательно изменить разметку.Если он не действителен, он не действителен.Это может привести ко всем видам проблем, кроме той, с которой вы сталкиваетесь в настоящее время.Если есть веская причина для изменений, то это она.