我有两个问题。
我目前正在设计一个移动网站。对于导航，我决定使用汉堡包方法进行链接。我在尝试检查输入元素时使用属性变换点击汉堡包时将汉堡包转换为X。问题是，当您第一次打开网页或刷新浏览器时，过渡元素会过渡而不会单击或点击汉堡包。无论如何，有没有解决。
如果在Microsoft Edge上查看网页，则会发生第二个问题。在Microsoft Edge中，标题“ White Bact”显示在两行上。我希望标题仅显示一行。如果要在Google Chrome浏览器上查看它，则标题在一行上。我设计并测试了Google chrome上的所有内容。我希望每个浏览器都一样。
我创建了一个链接，任何人都可以从Google驱动器下载文件。这些文件位于压缩文件夹中，因此您必须解压缩文件。我想做一个JSFiddle，但是问题不会发生。
您应该查看的主要文件是index.css和index.html。
https://drive.google.com/file/d/11N6l8OwcO_waeHcvfdWJyeFgw3O8zE4w/view?usp=sharing
对于第一个问题，您是否不想在页面打开时转换汉堡包？然后，我认为您只能在点击汉堡包时使用过渡：
span.ham:nth-of-type(2) {
/*transition: transform 500ms cubic-bezier(0.01, 0.24, 0.28, 1.35);*/
}
...
/* if the hamburger is clicked */
#hamburger:checked ~ label > span.ham:nth-of-type(2) {
transform: scale(0);
transition: transform 500ms cubic-bezier(0.01, 0.24, 0.28, 1.35);
}
对于第二个问题，“白BACT”将显示器上，如果你删除边一行width: 180px;在.logo > h1 > a：
.logo > h1 > a {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
/*width: 180px;*/
text-align: center;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句