html - IE6 错误 - anchor 标记内的 Div : inline images not links

Question

我试图让 anchor 标记中的所有内容成为可点击的链接。不幸的是，在 IE6(这是我目前唯一关心的浏览器)中，唯一不是可点击链接的是内联图像。我知道将 div 放在 anchor 内是无效的 html，但这不是我的标记，我被要求避免更改它。关于更改 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。

编辑:另一种不太干净的解决方案是使用 JavaScript 添加点击监听器并在点击图片时调用链接。