将子项链接到在 Chrome 中工作但在 Internet Explorer 中不工作的按钮答案

【问题标题】：Link child to button working in Chrome but not in Internet Explorer将子项链接到在 Chrome 中工作但在 Internet Explorer 中不工作的按钮
【发布时间】：2016-08-03 03:47:03
【问题描述】：

我不知道为什么会这样。我有一个链接，它是一个按钮的子元素，它应该在它被激活时将您带到页面的不同部分。该链接在 Chrome 中有效，但是当我尝试在 Internet Explorer 上加载该页面时，链接不起作用。这是我的这部分网站的 HTML 和 CSS：

HTML：

<form method="get" action="http://www.google.com/search" target="_blank">
<div style="border:1px solid black;padding:4px;width:20em;float:right;display: inline-block;">
<table border="0" align="center" cellpadding="0">
<tr><td>
<input type="text"   name="q" size="25"
maxlength="255" value=""/>
<input type="submit" value="Google Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
</td></tr></table>
</div>
</form>

<div id="score_container">
    <button id="cubs_score"><a href="#scoring_widget">How are the Cubs Doing?</a></button>
    <button id="packers_score"><a href="#scoring_widget">How are the Packers Doing?</a></button>
</div>

CSS：

#cubs_score{
    width: 300px;
    height: 100px;
    color: #CC3433 !important;
    background-color: #0E3386;
    font-size: 30px;
    text-align: center;
    font-variant: small-caps;
    padding: 10px;
    margin: auto;
    z-index: 3;
    position: relative;
    text-decoration: none;
}

#packers_score{
    width: 300px;
    height: 100px;
    color: #FFB612 !important;
    background-color: #203731;
    font-size: 30px;
    text-align: center;
    font-variant: small-caps;
    padding: 10px;
    margin: auto;
position: relative;
z-index: 3;
text-decoration: none;
}

#score_container{
    width: 310px;
    height: 200px;
    padding: 20px;
    background-color: grey;
    z-index: 2;
   color: inherit;
}

我签入的IE版本是10和11。

【问题讨论】：

作为按钮子级的链接是无效的 HTML
您可以为您的评分小部件发布 html 吗？您是使用任何 JS 进行跳转还是仅使用纯 HTML？ CSS 很可能与此无关。
哦，我不知道。有什么方法可以让我使用 div 但让它具有与按钮相同的简洁视觉效果？ @j08691
我不会让 div 具有视觉效果，但我认为链接会很棒。您可以在链接中添加悬停和单击 css，这样您就可以使它们具有各种视觉效果。

标签： javascript html css google-chrome internet-explorer

【解决方案1】：

根据Phrasing_content一个button可以包含

，如果它只包含短语内容。

所以这不是错误。

但是两个浏览器之间的行为不同，所以我添加了一些jQuery代码：

$(function () {
  $('#score_container button').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    window.location.hash = this.childNodes[0].getAttribute('href');
  });
});

#cubs_score{
  width: 300px;
  height: 100px;
  color: #CC3433 !important;
  background-color: #0E3386;
  font-size: 30px;
  text-align: center;
  font-variant: small-caps;
  padding: 10px;
  margin: auto;
  z-index: 3;
  position: relative;
  text-decoration: none;
}

#packers_score{
  width: 300px;
  height: 100px;
  color: #FFB612 !important;
  background-color: #203731;
  font-size: 30px;
  text-align: center;
  font-variant: small-caps;
  padding: 10px;
  margin: auto;
  position: relative;
  z-index: 3;
  text-decoration: none;
}

#score_container{
  width: 310px;
  height: 200px;
  padding: 20px;
  background-color: grey;
  z-index: 2;
  color: inherit;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<form method="get" action="http://www.google.com/search" target="_blank">
    <div style="border:1px solid black;padding:4px;width:20em;float:right;display: inline-block;">
        <table border="0" align="center" cellpadding="0">
            <tr><td>
                <input type="text"   name="q" size="25"
                       maxlength="255" value=""/>
                <input type="submit" value="Google Search" /></td></tr>
            <tr><td align="center" style="font-size:75%">
            </td></tr></table>
    </div>
</form>

<div id="score_container">
    <button id="cubs_score"><a href="#scoring_widget1">How are the Cubs Doing?</a></button>
    <button id="packers_score"><a href="#scoring_widget2">How are the Packers Doing?</a></button>
</div>

【讨论】：

【解决方案2】：

在 cmets 中，您想知道如何为按钮设置样式以产生像链接这样的酷炫效果。这是一个例子：

#link {
  text-decoration: none;
  color: #FFF;
  background-color: #006400;
  transition: background-color.2s, color .2s;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 4px;
}

#link:visited {
  text-decoration: none;
  color: #FFF;
  background-color: #006400;
  transition: background-color.2s, color .2s;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 4px;
}

#link:hover {
  text-decoration: none;
  color: #006400;
  background-color: #FFF;
  transition: background-color.2s, color .2s;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 4px;
}

#link:active {
  text-decoration: none;
  color: #056905;
  background-color: #EEE;
  transition: background-color.2s, color .2s;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 4px;
}

&lt;a id="link" href="http://www.stackoverflow.com"&gt;Stack Overflow&lt;/a&gt;

希望这可以帮助您完成项目！

【讨论】：