css 为什么使用锚链接时，此页面布局会中断

muk1a3rh 于 2023-04-13 发布在其他

关注(0)|答案(3)|浏览(142)

我的页面http://dl.dropbox.com/u/49912546/anchor_link_test.htm在使用锚时显示不同http://dl.dropbox.com/u/49912546/anchor_link_test.htm#vanquish-s-图像下方的内容略微上移
这种情况在浏览器中经常发生，所以规范中一定有一些东西说明这是正确的行为......但是什么呢？它只在加载图像时发生（如果src无效，则不会发生bug）。

edit顺便说一句，我已经找到了一个变通方法http：//dl.dropbox.com/u/49912546/anchor_link_test_solved.htm#vanquish-s，所以我不是在寻找bug修复-我只是想知道为什么所有浏览器都有导致这种行为的CSS实现。

css

来源：https://stackoverflow.com/questions/8240967/why-is-this-page-layout-breaking-when-an-anchor-link-is-used

3条答案

按热度按时间

pkbketx91#

half content看起来向上移动，因为它包含的.panel被设置为overflow:hidden，并且结果是有内容被剪切。
当浏览器试图识别命名锚中的元素时，它会看到该元素位于一个可以剪切其内容的容器中&因此将该元素滚动到顶部以确保其可见。
例如，如果您要在contentInner中添加任何元素，但要在命名的h3之上，则当使用命名锚时，这些元素在页面上不可见，因为half content滚动时，h3位于顶部。命名锚使滚动条将其自身定位在与命名元素顶部对齐的位置）

赞(0）回复(0）举报 2023-04-13

mnemlml82#

在我的情况下，删除溢出：隐藏工作

#maincontent {
    width: 100%;
    background: transparent;
    /* overflow: hidden; */
    clear:both;
}

赞(0）回复(0）举报 2023-04-13

kcugc4gi3#

在寻找解决方法后，我发现使用overflow: clip;而不是hidden修复了半内容问题。
这样做将阻止所有滚动，从而阻止浏览器滚动剪辑的内容。
与hidden类似，内容被裁剪到元素的填充框。clip和hidden之间的区别在于clip关键字也禁止所有滚动，包括编程滚动。框不是滚动容器，也不会启动新的格式上下文。如果要启动新的格式上下文，可以使用display：flow-root来执行此操作。- MDN文档

赞(0）回复(0）举报 2023-04-13

我来回答

css 为什么使用锚链接时，此页面布局会中断

3条答案

相关问题

热门标签

最新问答