Question

我有一个使用Jump Links在页面元素之间移动的网站（它是一个交互式用户指南），所有这些网站在Firefox，IE和Edge上运行正常，但Chrome和Opera忽略了这些内容。填充＆＃39;

由于网站有固定的菜单栏，这意味着Chrome和Opera栏下的跳转链接位置消失了。

我用于跳转链接偏移的简单代码是：

// import push from react-router-redux
import { push } from 'react-router-redux';

// when props.redirect is called, dispatch the push method
const mapDispatchToProps = ( dispatch, ownProps ) => {
  return {
    goto: (path) => dispatch( push(path) ),
  }
}


let Component = (props) => {

  // when called, this will call goto on props which inturn will dispatch the `push` method.
  let gotoNewPage = () => {
    props.goto('/some/page');
  }

  return (
    <div>
      <h1>Hello World</h1>
      <button onClick={ gotoNewPage }>Goto New Page</button>
    </div>
  );

}

我可以做些什么来使用Chroma和Opera？

我通过搜索找到的所有解决方案都没有回答不同浏览器之间的差异问题。

干杯！

Answer 1

填充不是以这种方式重新定位元素的合适方法，因为它会增加元素本身的大小。对于链接，您可以有效地创建更大的链接区域，链接上方的空间也可以点击。

您最好使用margin-top，这会将元素向下移动。根据标记的其余部分，您可能还需要在链接元素上设置display: inline-block;。

通过style =＆＃34; padding-top：100px跳转链接和定位;

1 个答案: