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

Question

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

cssanchortransformcss-transforms

3

当我链接到一个变换翻译元素内的页面锚点时，我遇到了一些奇怪的行为。

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

但是，在Firefox/IE中，链接到锚点会移动整个翻译元素。

我已经设置了一个fiddle demonstrating this。

标记（为代码删除了一些段落）

<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滚动来解决？谢谢您提前的帮助。Adam

- Adam Smith

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Suresh Karia · Answer 1

在IE和Mozilla中也可以使用这些属性

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- Opera：-o-