html - 为什么父 Div 会被链接？

Question

我在另一个内部有一个 Div。子 Div 是一个启动 javascript 动画的链接(通过动画化 css 属性)，我放入包装器的原因是因为我想让 child 居中并 float 。所以子 Div 做居中而父做 float 。原因是因为您不能使用 float: 属性执行 margin:0 auto;。

现在我的问题是，当我在子 Div 周围放置一个链接时，父 Div 也会被链接!这一刻真的让我感到莫名其妙。这种情况发生在 Chrome 和 Firefox 中，但奇怪的是它不会发生在 IE 中!有人知道怎么回事吗？

父级是#eastereggwrapper，子级是#eastereggbutton。这是代码片段，我的 HTML:

<div id="eastereggwrapper">
  <a href="" class="secret" >
    <div id="eastereggbutton" >
      Don't Click Me
    </div>
  </a>
</div>

和我的 CSS:

#eastereggwrapper {
    background-color: black;
    bottom: 0px;
    width: 100%;
    position: relative;
    float:left;
}

#eastereggbutton {
    margin:0 auto;
    width:10%; 
    height:50px;
    background-color:green;
    color: black;
    font-size:18px;
    font-family:Tahoma, Geneva, sans-serif;
    text-align:center;
}

附言 secret 类未定义，它用于 Javascript 代码。

Answer 1

尝试以下两种方法之一:

1. 将<a>在第二个 div 里面
2. 用 <a> 替换子 div标签:

HTML

<div id="eastereggwrapper">
  <a href="" class="secret" id="eastereggbutton">
      Don't Click Me
  </a>
</div>

CSS

#eastereggbutton {
    display: block;
    margin:0 auto;
    width:10%; 
    height:50px;
    background-color:green;
    color: black;
    font-size:18px;
    font-family:Tahoma, Geneva, sans-serif;
    text-align:center;
}