CSS mit Chrome arbeiten, aber nicht IE

Question

Ich habe eine Liste von CSS meiner Link-Schaltfläche zu formatieren, aber es erscheint nur in Chrome arbeiten, aber nicht IE, alle Ideen, die schweben und alles funktioniert einfach nicht den Link selbst

Dank im Voraus

CSS

.button { 
    background-color: #4CAF50; 
    border-radius: 50%; 
    width: 170px; 
    height: 170px; 
    color: white; 
    padding: 4px 8px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    margin: 4px 2px; 
    -webkit-transition-duration: 0.4s; /* Safari */ 
    transition-duration: 0.4s; 
    cursor: pointer; 
} 

.button1 { 
    position: absolute; 
    margin-top: 0px; 
    margin-left: 400px; 
    background-color: white; 
    color: white; 
    border: 4px solid #83b739; 
} 

.button1:hover { 
    background-color: #83b739; 
    color: white; 
} 

HTML

<button class="button button1"><a href="http://www.google.com">link</a></button> 

Answer 1

Es ist wahrscheinlich nicht einmal ein C SS-Problem, aber eher ein Problem mit der Verschachtelung interaktiver Elemente.

Fügen Sie keinen Link in eine Schaltfläche ein. Das ist einfach bizarr. Verwenden Sie nur das <a> Element und stylen Sie das.

Answer 2

Ich bin nicht genau sicher, was Ihr Problem verursacht hätte, ist aber wahrscheinlich aufgrund einer CSS/HTML-Verschachtelung Problem, wo mehrere CSS-Stile mit den verschachtelten Elemente unterschiedlich auf verschiedenen Browsern interagieren? Es ist besser, einfach das Button-Element im HTML-Code zu entfernen und einfach das <a>-Tag so zu stylen, dass es wie eine Schaltfläche aussieht. Dadurch ist der Code weniger kompliziert, Sie sollten weniger Probleme mit Stilen und verschachtelten Elementen haben, und das ist die Art und Weise, wie die meisten Link-Buttons sowieso machen. Hier ist ein Beispiel, wie ich einen Link-Button in einem aktuellen Projekt erstellt habe, einige der Stylings fehlen (benutzerdefinierte Fonts, etc.), aber es zeigt, dass Sie das Button-Tag nicht brauchen, es funktioniert besser ohne es und wie machen Sie einen Knopf mit nur dem <a> Tag.

.btn:link, 
 
.btn:visited { 
 
    display: inline-block; 
 
    padding: 10px 30px; 
 
    font-weight: 300; 
 
    text-decoration: none; 
 
    color: white; 
 
    border-radius: 200px; 
 
    border: 3px solid #1A75BB; 
 
    margin: 20px 20px 0px 0px; 
 
    transition: background-color 0.2s, border-color 0.2s, color 0.2s; 
 
} 
 

 
.btn:hover, 
 
.btn:active { 
 
    background-color: #14598e; 
 
    border-color: #14598e; 
 
} 
 

 
.btn-full:link, 
 
.btn-full:visited { 
 
    background-color: #1A75BB; 
 
    margin-right: 20px; 
 
} 
 

 
.btn-full:hover, 
 
.btn-full:active { 
 
    background-color: #14598e; 
 
} 
 

 
.btn-ghost:link, 
 
.btn-ghost:visited { 
 
    color: black; 
 
    border-color: #14598e; 
 
} 
 

 
.btn-ghost:hover, 
 
.btn-ghost:active { 
 
    color:white; 
 
}

<a href="#section-one" class="btn btn-full">Why use AnyMath?</a> 
 
<a href="#section-two" class="btn btn-ghost">What problems can AnyMath solve?</a>

Answer 3

Es ist nicht nur über Internet Explorer. Ein solcher Link-Inside-Button funktioniert auch nicht in Firefox.

Wenn Sie wirklich (denken Sie zweimal) diese benötigen eine Taste statt nur ein Link zu sein, den expliziten Link von Ihrer Schaltfläche entfernen und wickeln Sie die Taste in einem simple form:

<form action="http://example.com/"> 
    <button class="button button1" type="submit">link</button> 
</form> 

Aber basierend auf dem Code ist button Element nicht mehr benötigt, und Sie sollten nur einen Link statt:

<a href="http://example.com/" class="button button1">link</button>