Изображение внутри элемента списка внутри ссылки не активируется в IE

Question

HTML-код:

<ul>
    <a href='index.php'> 
        <li>
            <img src='images/icons/home.png' alt='' />
            <p>Home</p>
        </li> 
    </a>
</ul>

CSS:

ul {

    height:100%;

    position: absolute;
    right: 0;
    text-align: left;
}

ul li {

    height: 100%;
    width:90px;
    float: left;
}

ul li p {
    margin-top: 4px;
    width: 100%;    
}


ul a li {
    display:block;
}

ul li img {
    margin-top: 8px;
    width: 43px;
    height: 43px;
}

(я оставил здесь все свойства, кроме содержимого шрифта)

Проблема:

Только в Internet Explorer: вся ссылка (представляющая собой квадратный блок с текстом и изображением внутри) обычно функционирует как ссылка , за исключением части, где изображением является .В той части при нажатии на ссылку не работает.Однако, как ни странно, он все равно показывает ссылку в строке состояния при наведении курсора на любую часть, , включая изображение .

Answer 1

Вы должны предоставить увеличенный образец вашего HTML, но я уже вижу, что он недействителен:

<a href='index.php'> 
    <li>
        ..
    </li> 
</a>

• У вас либо есть элемент a в качестве прямого потомка элемента ul, который недопустим.
• Или у вас нет элемента ul, который также недопустим.
• Допустимо использовать элемент li только внутри элемента ul или ol (и нескольких других менее распространенных сценариев).

Действительный HTML будет выглядеть так (при условии HTML5!):

<ul>
    <li>
        <a href="#">
            <img src='images/icons/home.png' alt='' />
            <p>Home</p>
        </a>
    </li>
</ul>

Как только вы используете правильный HTML, он должен работать в IE.

(Но вы не указали, какая версия IE, так что я просто предполагаю, что это будет.)