CSS работает с Chrome, но не IE

Question

У меня есть список CSS, чтобы отформатировать кнопку ссылки, но это кажется работает только в Chrome, но не IE, любые идеи, парения и все работает только не саму ссылку

спасибо заранее

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

Это, вероятно, даже не C SS, но скорее проблема с вложением таких интерактивных элементов.

Не помещайте ссылку внутри кнопки. Это просто странно. Используйте только элемент и стиль <a>.

Answer 2

Я не совсем уверен, что вызвало бы вашу проблему, однако это, скорее всего, связано с проблемой вложения css/html, где несколько стилей css взаимодействуют с вложенными элементами по-разному в разных браузерах? Лучше просто удалить элемент кнопки в html и просто нарисуйте тег <a>, чтобы он выглядел как кнопка. Делая это, код менее сложный, у вас должно быть меньше проблем со стилями и вложенными элементами, и в этом случае большинство ссылок на кнопки ссылок. Вот пример того, как я создал кнопку ссылки в недавнем проекте, некоторые стили отсутствуют (пользовательские шрифты и т. Д.), Но это показывает, что вам не нужен тег кнопки, он работает лучше без него и как сделайте кнопку с тегом <a>.

.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

Это не только IE. Такая ссылка внутри кнопки не работает и в Firefox.

Если вы действительно (подумайте дважды) нужно, чтобы это было кнопка вместо того, чтобы просто ссылку, удалите прямую связь с вашей кнопки и завернуть кнопку в simple form:

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

Но основанный на коде, button элемент не нужен, и вы должны просто использовать ссылку вместо:

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