点击事件重定向到特定位置不适用于 Internet Explorer，但适用于 Mozilla 和 Chrome答案

【问题标题】：redirection to a specific location on click event not working with Internet Explorer but working on Mozilla and Chrome点击事件重定向到特定位置不适用于 Internet Explorer，但适用于 Mozilla 和 Chrome
【发布时间】：2014-06-17 20:09:58
【问题描述】：

以下代码在 Mozilla 和 Chrome 上运行良好，但在 Internet Explorer 上却不行。在这里，从第一页（div 12）开始，我试图通过点击事件转到下一页（div 8）上的特定位置。我尝试了一切并在互联网上搜索，但无法找到解决方案。谁能帮我解决这个问题？

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<style>
table
{
border-collapse:collapse;
}
#table8{
    display: none;
}
th
{
    background-color:#bababa;
    color:white;
    font-family:"Arial";
}
button{
    font-size: 20px;
}
a:link    {color:blue;}
a:visited {color:purple;}
a:hover   {color:red;}
a:active  {color:red;}
a.bigsize:hover {font-size:90%;}
.some{
    width:50px;
    }
</style>

<script>
function show(nr){
    document.getElementById("table8").style.display="none";                <!-- Shows -->
    document.getElementById("table12").style.display="none";                <!-- Shows -->
    document.getElementById("table"+nr).style.display="block";
}
</script>
</style>



<div id="table12">
        <h2><section id="back223">Values</section></h2>
        <br><br>

        <table border=1 cellpadding=7>
            <tr><th>Table name</th>
            </tr>
            <tr bgcolor="#ffffe6"><td><a onclick='show(8);' href="#linkc1" name="linkc1">IPAddress</a></td>
            </tr>
            <tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc2" name="linkc2">IP_ROUTE1</a></td>
            </tr>
            <tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc3" name="linkc3">IP_ROUTE2</a></td>
            </tr>
            <tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc4" name="linkc4">IP_ROUTE3</a></td>
            </tr>
            <tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc5" name="linkc5">IP_ROUTE4</a></td>
            </tr>
            <tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc6" name="linkc6">IP_ROUTE5</a></td>
            </tr>
            <tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc7" name="linkc7">IP_ROUTE6</a></td>
            </tr>
            <tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc8" name="linkc8">IP_ROUTE7</a></td>
            </tr>
            <tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc9" name="linkc9">IP_ROUTE8</a></td>
            </tr>
        </table>
</div>


<div id="table8">
    <div  style="position:fixed;right:40px;top:20px;">
        <a name="t12" href="#t12" onclick='show(12);'><button style="height: 35px; width: 85px">  Back  </button></a>
    </div>

    <h2>Values</h2>

    <table border=1 cellpadding=7>
        <tr bgcolor="#dddddd">
            <th colspan=2 align="left"><section id="linkc1">IPAddress </section></th>
        </tr>
        <tr bgcolor="#f7f1ba">
            <td align="center"><b>Type</b></td>
            <td align="center"><b>Id</b></td>
        </tr>
        <tr bgcolor="#e6ffff">
            <td>Dns</td>
            <td>1</td>
        </tr>
    </table>
    <br><br><br><br>
    <table border=1 cellpadding=7>
        <tr bgcolor="#dddddd">
            <th colspan=2 align="left"><section id="linkc2">IP_ROUTE1 </section></th>
        </tr>
        <tr bgcolor="#f7f1ba">
            <td align="center"><b>IP</b></td>
            <td align="center"><b>Id</b></td>
        </tr>

        <tr bgcolor="#d4ffc6">
            <td>0.0.0.0</td>
            <td>0</td>
        </tr>
    </table>

    <br><br><br><br>
    <table border=1 cellpadding=7>
        <tr bgcolor="#dddddd">
            <th colspan=2 align="left"><section id="linkc3">IP_ROUTE2 </section></th>
        </tr>
        <tr bgcolor="#f7f1ba">
            <td align="center"><b>IP</b></td>
            <td align="center"><b>Id</b></td>
        </tr>

        <tr bgcolor="#d4ffc6">
            <td>1.1.1.1</td>
            <td>1</td>
        </tr>
    </table>

    <br><br><br><br>
    <table border=1 cellpadding=7>
        <tr bgcolor="#dddddd">
            <th colspan=2 align="left"><section id="linkc4">IP_ROUTE3 </section></th>
        </tr>
        <tr bgcolor="#f7f1ba">
            <td align="center"><b>IP</b></td>
            <td align="center"><b>Id</b></td>
        </tr>

        <tr bgcolor="#d4ffc6">
            <td>2.2.2.2</td>
            <td>2</td>
        </tr>
    </table>

    <br><br><br><br>
    <table border=1 cellpadding=7>
        <tr bgcolor="#dddddd">
            <th colspan=2 align="left"><section id="linkc5">IP_ROUTE4 </section></th>
        </tr>
        <tr bgcolor="#f7f1ba">
            <td align="center"><b>IP</b></td>
            <td align="center"><b>Id</b></td>
        </tr>

        <tr bgcolor="#d4ffc6">
            <td>3.3.3.3</td>
            <td>3</td>
        </tr>
    </table>

    <br><br><br><br>
    <table border=1 cellpadding=7>
        <tr bgcolor="#dddddd">
            <th colspan=2 align="left"><section id="linkc6">IP_ROUTE5 </section></th>
        </tr>
        <tr bgcolor="#f7f1ba">
            <td align="center"><b>IP</b></td>
            <td align="center"><b>Id</b></td>
        </tr>

        <tr bgcolor="#d4ffc6">
            <td>4.4.4.4</td>
            <td>4</td>
        </tr>
    </table>

    <br><br><br><br>
    <table border=1 cellpadding=7>
        <tr bgcolor="#dddddd">
            <th colspan=2 align="left"><section id="linkc7">IP_ROUTE6 </section></th>
        </tr>
        <tr bgcolor="#f7f1ba">
            <td align="center"><b>IP</b></td>
            <td align="center"><b>Id</b></td>
        </tr>

        <tr bgcolor="#d4ffc6">
            <td>5.5.5.5</td>
            <td>5</td>
        </tr>
    </table>

    <br><br><br><br>
    <table border=1 cellpadding=7>
        <tr bgcolor="#dddddd">
            <th colspan=2 align="left"><section id="linkc8">IP_ROUTE7 </section></th>
        </tr>
        <tr bgcolor="#f7f1ba">
            <td align="center"><b>IP</b></td>
            <td align="center"><b>Id</b></td>
        </tr>

        <tr bgcolor="#d4ffc6">
            <td>6.6.6.6</td>
            <td>6</td>
        </tr>
    </table>

    <br><br><br><br>
    <table border=1 cellpadding=7>
        <tr bgcolor="#dddddd">
            <th colspan=2 align="left"><section id="linkc9">IP_ROUTE8 </section></th>
        </tr>
        <tr bgcolor="#f7f1ba">
            <td align="center"><b>IP</b></td>
            <td align="center"><b>Id</b></td>
        </tr>

        <tr bgcolor="#d4ffc6">
            <td>7.7.7.7</td>
            <td>7</td>
        </tr>
    </table>

</div>

</body>
</html>

编辑：添加图片以清楚地显示问题。

输入：这是您从列表中单击链接的第一页。所以，我在这个页面上点击IP_ROUTE4。

预期行为：这应该是预期的行为。在第一页上，我点击了IP_ROUTE4，所以这个表格应该出现在顶部，这样用户就不必滚动和搜索它。

IE 中的行为：这就是 IE 所发生的情况。它将我重定向到页面顶部，而不是表格IP_ROUTE4。

【问题讨论】：

你错过了“javascript:..”，你说的是哪个 IE 版本？
@xmojmr，如果脚本在 href 中，你只需要 "javascript:" 部分。 onclick 不需要它。
有一个 jsFiddle 演示总是很好 - jsfiddle.net/L5w3e。仅供参考，您在文件顶部缺少 <html> 开始标签。
正在使用 IE 版本 8。
我无法重现任何问题。我用的是 IE 8.0.6001.18702。您可能遇到了 IE 兼容视图模式问题，请参阅例如stackoverflow.com/questions/3759731/…

标签： javascript html

【解决方案1】：

我主要使用文章尝试让您的示例在 IE8 中工作：

我放弃这个是一种无用的消磨时间的方式。我只能推荐你支持Modern Browsers。

众所周知，Internet Explorer 对开发人员来说很痛苦。由于缺乏对标准、专有扩展等的支持。它最近有所改进，但在 IE8 中没有。

IE 8.0.6001.18702 在我的机器上的 HTML5test - How well does your browser support HTML5? 仅显示 43 分，共 555 个 分。例如它不支持您用作锚目标的<section> 元素..

如果您确实必须支持 IE8，请查看上面的链接以获取一些提示或使用一些库，例如 jQuery 1.x，其中包含所有这些 hack、变通方法和 polyfill。

【讨论】：