链接中的列表项内部的图像不能在IE中单击 [英] Image inside list item inside link not clickable in IE

问题描述

HTML代码：

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

CSS：

  ul {
 
 height：100％; 
 
职位：绝对; 
 right：0; 
 text-align：left; 
} 
 
 ul li {
 
 height：100％; 
 width：90px; 
 float：left; 
} 
 
 ul li p {
 margin-top：4px; 
宽度：100％; 
} 
 
 
 ul a li {
 display：block; 
} 
 
 ul li img {
 margin-top：8px; 
 width：43px; 
 height：43px; 
 
 $ / code $ / pre 
 
 
（我已经把所有的属性都保留在这里，除了字体） p> 
 
 
问题：
 
 
 
仅适用于Internet Explorer：整个链接（包含文字和图片的方块内部）通常作为链接起作用，除了图片所在的部分以外。在那部分点击链接时不起作用。然而，奇怪的是，当您将鼠标悬停在任何部分上时，状态栏中显示链接，包括图片。  
 
解决方案
您应该提供更大的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>主页< / p> 
< / a> 
< / li> 
< / ul> 
  
一旦您使用有效的HTML，它应该在IE中工作。
 
 
 
 （但是，您没有指定IE的版本，所以我只是猜测它会。） 
  
The HTML code:

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


The 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;
}
(I've left all the properties here except the font stuff)

The problem:

In Internet Explorer only: the whole link (which is a square block with text and an image inside) functions normally as a link except for the part where the image is. In that part when clicked on the link does not work. It does, however, strangely, still, show the link in the status bar when you hover over any part, including the image.
解决方案
You should provide a larger sample of your HTML, but I can already see that it's invalid:
<a href='index.php'> 
    <li>
        ..
    </li> 
</a>



You either have an a element as a direct child of a ul element which is invalid.
Or, you don't have a containing ul element, which is also invalid.
It's only valid to use an li element inside a ul or ol element (and a couple of other less common scenarios).


Valid HTML would look like this (assuming HTML5!):
<ul>
    <li>
        <a href="#">
            <img src='images/icons/home.png' alt='' />
            <p>Home</p>
        </a>
    </li>
</ul>
Once you use valid HTML, it should work in IE.

(But, you didn't specify what version of IE, so I'm just guessing that it will.)

                        
这篇关于链接中的列表项内部的图像不能在IE中单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！