我一直在寻找其他一些答案,但他们似乎都与iOS版本〈5.0有关。我在React中创建了我的页面,固定的标题在Desktop Chrome和Safari中工作正常,但在移动浏览器中不工作。标题链接在移动浏览器中也不工作。这里可能发生了什么?我页面上的其他链接工作正常。
CSS:
.header {
position: fixed;
top: 0;
height: 100px;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
color: white;
background-color: #081c3f;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
z-index: 2;
letter-spacing: .1em;
}
超文本:
从"React"导入React;导入'./header.css';
export default class Header extends React.Component {
render() {
return (
<div className='header'>
<h1 className='name'>Conor Carey</h1>
<div className='chapters'>
<a href='#about'>ABOUT</a>
<a href='#education'>RESUME</a>
<a href='#work'>WORK</a>
<a href='#contact'>
<div className='contactLink'>
CONTACT
</div>
</a>
</div>
</div>
);
1条答案
按热度按时间x8diyxa71#
我也遇到了同样的问题,至少对我来说,这与页眉本身无关,也与页眉的位置或包含页眉的元素无关。我注意到这种行为只发生在我的应用主页上,所以我开始隐藏组成它的不同组件,直到我发现注解掉其中一个组件解决了问题。这个特定组件显示了一个卡片列表,我有一个标题,最重要的是,一个背景。由于我构建网站的方式,我不得不创建这个组件的一个单独的子元素作为一个彩色背景,使它比它的容器和整个视口更宽,以完全覆盖它。使这个背景元素的宽度为其父元素的200%,出于某种原因,我无法解释,导致我的页眉和侧边导航不能粘在页面顶部。也许有人对CSS了解更多,可以更好地解释它,但对我来说解决办法就是不让那个元素那么宽。
下面是一些表示这种情况的代码:
解决方法:使元素足够宽,不要夸大