html - 内部链接故障排除(href ="#x"id ="x")

Question

我想知道是否有人对为什么我的内部链接在网页上不起作用有绝妙的主意。我已将 html 设置为标准

<a href="#link"><button>Some Text</button></a>
....
bunch of content
....
<div id="link"></div>

这是代码笔链接 http://codepen.io/Cornucopia/pen/vyrPWw?editors=1100#0

在我将足够多的代码变灰并隔离导致问题的行之前，由于未知原因，这无法正常工作。在一个链接的 css 文件中有一个 float:left 用于 li 元素。该命令与按钮链接无关，因此我不明白为什么它会使超链接无法工作。但是当“.grid .tile {float: left;} ”变灰时，链接会再次工作。

Answer 1

你得到的结果是绝对正确的。

案例一:

/*.grid .tile {float: left;} */
<div id="link" style="width:100%;height:30px;background:yellow;"></div>

结果:

然后，点击您的按钮，您就会来到这个位置。

案例二:

.grid .tile {float: left;} 
<div id="link" style="width:100%;height:30px;background:yellow;"></div>

结果:

看，现在div的位置(黄色背景)

所以， anchor 工作正常。浏览器渲染、html 或 JavaScript 都没有问题。

第二种情况的事故原因

你还没有完全理解 float 。它呈现一个元素，类似于 (display:inline + Position absolute) 的一些混合行为，这意味着，首先 ---> 它不再有资格获取高度然后为下一个元素提供空间。其次，这将不再影响其他元素在 Y 轴上的位置，即高度。

所以现在你所有的 li(都是 float:left)对在 Y 轴上占用空间或在高度上占用空间没有影响。所以 Div，已经向上移动(比如position:absolute元素不影响其他元素)。

因此，删除相同的内容会得到您想要的结果。

希望这对您有所帮助!