Question

我想把一些链接放到图像背后的其他页面上，一些图像链接在Internet Explorer中工作（标题中的图像），其中一些没有（我页面中的图像）

图片是可点击的，但页面没有加载，我可以看到它链接正确，因为当我将鼠标悬停在图像上时，它会显示我的垫片。

这是我的代码：

这是非工作图像的代码，我将样式和重要标签放在那里因为它使其适用于其他链接图像。

<div class="buttonlinks">
    <div class="thumbnail">
      <a href="modeling.html" style="text-decoration:none !important;"><img border="0" src="images/Knop1Layer.PNG" class="button"></a>
      <div class="tekstblok">
      <ul class="buttontekst">
        <li>HEALTH ECONOMIC MODELS</li>
        <li>BUDGET IMPACT</li>
        <li>Art. 81 TOOLS</li>
        <li>VALUE  TOOLS</li>
        <li>…</li>
      </ul>
      </div>
    </div>
    <div class="thumbnail">
      <a href="data analyse.html" style="text-decoration:none !important;"><img border="0" src="images/Knop2Layer.PNG" class="button"></a>
        <div class="tekstblok">
      <ul class="buttontekst">
        <li>EPIDEMOLOGY</li>
        <li>SCENARIO ANALYSIS</li>
        <li>PRICE OPTIMISATION</li>
        <li>FORCASTING</li>
        <li>…</li>
      </ul>
      </div>
    </div>

CSS：

.buttonlinks {
    clear: both;
    display: inline-block;
    width: 100%;
    background-color: #D9D9D9;  
    min-height: 300px;
    padding-bottom: 35px;
    padding-top: 0px;
    margin-top: -5px;
    margin-bottom: 0px;
}
.thumbnail {
    position: inline-block;
    float: left;
    margin-top: 35px;
    padding-left: 8%;
    padding-right: 11.1%;
}
.button {
    width: 200px;
    min-height: 80px;
    margin: 0 auto;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    color: #000;
    transition: all 0.3s linear;
    justify-content: center;
    display: flex;
    line-height: 30px;
}

.button:hover{
    opacity: 0.5;
    background-color: #FEFEFE;
    cursor: pointer;
}


.buttontekst{
    list-style: none;
    text-align: left;
    margin: 0 auto;
    padding: 0;
}

这是工作按钮的代码：

<a href="MA activities.html" style="text-decoration:none !important;"><img src="images/Knop3Front.PNG" class="navbuttons"></a>
        <img src="images/Knop2Front.PNG" id="current" class="navbuttons">
        <a href="modeling.html" style="text-decoration:none !important;"><img src="images/Knop1Front.PNG" class="navbuttons"></a>
        </ul>

CSS：

.navbuttons{
    max-height: 20%;
    max-width: 20%;
    margin-right: 25px;
    margin-left: 3%;
    margin-bottom: 5px;
    float: right;
}

#current{
    opacity:0.5;
}

提前谢谢。

Answer 1

确保文件扩展名为.png而不是.PNG，因为您的服务器很可能在Linux发行版下运行，其文件系统为usually case-sensitive。

此外，您的文件结构应类似于：

图像/
- Knop1Layer.png
- Knop2Layer.png
的index.html

如果您的HTML文件没有存储在根目录中，则可能需要使用绝对路径，因此images/Knop1Layer.png应该是/images/Knop1Layer.png。

Answer 2

第二张图片中的问题是网址中的空格

图像背后的href链接在ie中不起作用

2 个答案: