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中的button元素，然后将<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中也不起作用。

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

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

CSS使用Chrome而不是IE

3 个答案: