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

这可能甚至不是 CSS 问题，而是嵌套交互式元素的问题。

不要在按钮内放置链接。这太奇怪了。只使用 <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 中也不起作用。

如果您真的（三思而后行）需要将其作为一个 按钮 而不仅仅是一个链接，请从您的按钮中删除显式链接并将该按钮包装在 @ 987654321@:

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