图片后面的href链接在ie中不起作用

Posted 2023-03-06

【中文标题】图片后面的href链接在ie中不起作用

【英文标题】：href links behind images don't work in ie

【发布时间】：2018-06-20 01:45:12

【问题描述】：

我想在图片后面放一些到其他页面的链接，一些图片链接在 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;

提前谢谢你。

【参考方案1】：

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

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

图片/ Knop1Layer.png Knop2Layer.png index.html

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

【讨论】：

当我将 / 添加到我的路径时，图片消失了。大写或小写的 png 不会改变任何内容。

您的图像是存储在服务器根目录 (/images) 中还是存储在不同的子目录中？

它存储在一个额外的文件夹中，即服务器根目录

然后你可以将其设置为/folderName/images/imageName.png。您可以通过阅读有关相对和绝对 URL 的文档以及何时应该使用其中一个或另一个来了解有关如何设置 URL 格式的更多信息。

【参考方案2】：

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

【讨论】：

这只是文件名，我想应该不会有任何问题吧？如果没有空格，第一张图片也无法使用

我刚刚在我自己的项目中尝试了您的代码。它工作正常。唯一可能出错的是您的 Internet Explorer 设置。微软因此而臭名昭著。

确定没问题。如果这是问题，请标记正确。我可以使用积分

编辑：问题只在我的主页，文本链接也不起作用...

在 /images 之前使用 ~