Question

在链接到转换翻译元素中的页面锚点时，我遇到了一些奇怪的行为。

使用Safari / Chrome / Opera时，锚点按照我的预期工作，只需向下移动并将翻译后的元素保持在正确的位置。

使用Firefox / IE链接到锚点会移动整个翻译元素。

标记（代码删除的段落数量）

<div id="container">
  <p><a href="#link-to-me">Link to page anchor</a></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut iaculis ante. Sed elementum mauris eu dui elementum adipiscing. Praesent cursus quis velit vel accumsan. Donec lacinia eu ipsum nec pulvinar. Donec sed diam at arcu gravida auctor. Duis eu lobortis elit. Cras consectetur neque vitae velit egestas, eget pulvinar nunc ornare. Morbi fermentum metus quis massa mollis lobortis. Nulla facilisi. Cras vestibulum pharetra justo, vel tincidunt urna aliquet id. Nulla feugiat, tellus id ultricies lobortis, nibh metus placerat magna, nec pellentesque arcu mauris quis ligula. Ut convallis tellus sed cursus porttitor. Donec a urna sed risus ornare ultricies.</p>

  <h2 id="link-to-me">Page Anchor</h2>
  <p>Integer sit amet placerat leo. Fusce posuere volutpat massa. Cras volutpat est justo, venenatis mattis odio vestibulum at. Ut egestas dignissim tempus. Curabitur augue nunc, interdum vel nunc a, venenatis ullamcorper elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque accumsan varius augue imperdiet pulvinar. Ut vitae mi purus. Fusce volutpat accumsan congue. Aliquam turpis nunc, hendrerit at accumsan at, viverra et nulla. Aliquam eleifend libero metus, porttitor blandit erat dictum nec. Proin nec arcu dapibus, aliquam mi quis, rhoncus tellus. Nunc ac sapien mauris. Nullam dolor turpis, aliquet in rutrum vel, pulvinar in ipsum.</p>
</div>

CSS

html {
  overflow-x: hidden;
}

body {
  background-color: black;
  overflow-x: hidden;
}

#container {
  -webkit-transform: translate(50%);
  transform: translate(50%);
  background-color: white;
  padding: 15px;
}

这是一个问题，还是浏览器行为的差异？这可以通过使用JS来滚动来解决吗？

提前感谢您的帮助。

亚当

Answer 1

也可以将此属性用于ie和mozzila

CSS

    #container {
    -webkit-transform: translate(50%);
    -moz-transform: translate(50%);
    -ms-transform: translate(50%);
    -o-transform: translate(50%);
    transform: translate(50%);
    background-color: white;
    padding: 15px;
}

浏览器前缀用于添加可能不属于正式规范的新功能，以及在尚未最终确定的规范中实现功能。

CSS浏览器前缀为：

Safari：-webkit- Chrome：-webkit- Firefox：-moz- Internet Explorer：-ms- iOS-android：-webkit- 歌剧：-o -

页面锚点和CSS转换（IE和Firefox问题）

1 个答案: