Verknüpfen Kind mit der Schaltfläche in Chrome arbeiten, aber nicht in Internet Explorer

Question

Ich kann nicht herausfinden, warum das passiert. Ich habe eine Verknüpfung, die ein untergeordnetes Element zu einer Schaltfläche ist, und es soll Sie zu einem anderen Teil der Seite bringen, wenn es aktiviert ist. Der Link funktioniert in Chrome, aber wenn ich versuche, die Seite im Internet Explorer zu laden, funktionieren die Links nicht. Das ist mein HTML und CSS für diesen Teil der Website:

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; 
} 

Die Versionen von IE, die ich überprüft haben, sind in 10 und 11

Answer 1

nach Phrasing_content ein button kann enthalten

< a>, wenn es nur Phrasierungsinhalte enthält.

Es ist also kein Fehler.

Aber es gibt ein anderes Verhalten zwischen den beiden Browsern, so habe ich einige jQuery-Code:

$(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>

Answer 2

In den Kommentaren, Sie sich wundern, wie eine Schaltfläche, um Stil, cool zu haben Effekte wie ein Link. Hier ist ein Beispiel dafür:

#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; 
 
}

<a id="link" href="http://www.stackoverflow.com">Stack Overflow</a>

Hoffnung, dass dies hilft Ihnen, Ihr Projekt zu beenden!