如何使为 Firefox 浏览器开发的网站与 Safari 和 Chrome 兼容？
[英]How do I make a website developed for Firefox browsers compatible with Safari and Chrome?
问题描述
To start off, I am not very experienced with web development.
首先，我对 web 开发不是很有经验。 I know enough, however when I get to browser compatiblity I struggle.我知道的足够多，但是当我获得浏览器兼容性时，我很挣扎。 I am trying to figure out why Chrome and Safari are reading my website's code so differently.我试图弄清楚为什么 Chrome 和 Safari 以如此不同的方式阅读我网站的代码。 I understand different browsers read code differently, however I have been trying to figure out how to fix this problem on my website for awhile now and I am unable to.我了解不同的浏览器以不同的方式读取代码，但是我一直试图弄清楚如何在我的网站上解决这个问题一段时间，但我无法做到。
I'm hoping that I can at least figure out why the menu is on the left in the Safari browser and not on the right like it should be in the Firefox browser.我希望我至少能弄清楚为什么菜单在 Safari 浏览器的左侧，而不是像 Firefox 浏览器那样在右侧。 If I figure this out I feel it can help me figure out how to clean up the rest of my code so it looks like it should in the Safari browser.如果我弄清楚这一点，我觉得它可以帮助我弄清楚如何清理我的代码的 rest，所以它看起来应该在 Safari 浏览器中。 I've been trying to figure out how to implement webkit properly, but I do not know how to do so yet.我一直在试图弄清楚如何正确实现webkit ，但我还不知道该怎么做。
One reason it may look this way is because I am using Safari on a PC, which may make the Safari version look the way it does on my computer.它可能看起来这样的一个原因是因为我在 PC 上使用 Safari，这可能会使 Safari 版本看起来像它在我的计算机上的样子。 Below are screenshots of the landing page and how they look on Firefox and Safari:以下是登录页面的屏幕截图以及它们在 Firefox 和 Safari 上的外观：
[Firefox Version (How the website is supposed to look)][1] [Firefox 版本（网站的外观）][1]
[Safari Version][2] [Safari版][2]
.nav { position: fixed; }.navbar-fixed-top { transition: background-color.25s linear; position: fixed; top: 0; background-color: transparent;important: height; 100px: width; 100%: z-index; 1000. }.navbar-fixed-top:scrolled { transition. background-color;25s linear: position; fixed: top; 0: background-color; white:important; display: initial; height: 100px; width: 100%; z-index. 1000: };navigation { position: fixed; top: 0; left: 0; background-color: #ddbe6e; height: 100%; width: 100%; display: none; z-index: 999; transition: all 1s ease-in 0s, font-family; bebas-kai. sans-serif: };navigation ul { list-style-type: none; text-align. center: };navigation li a { color. #222658: };navigation ul li { padding: 30px; } #nav-list { position: absolute; left: 50%; top: 50%, transform; translate(-50%: -50%); font-size. 40px. }:navigation;show { display: initial. animation; fade-in:5s ease-in; } #logo { position: absolute; top: 50%; float: left; transform: translateY(-50%); margin-left: 50px; z-index: 1000; user-select: none; cursor. pointer: } #logo;close { position: absolute; top: 50%; float: left; transform: translateY(-50%); margin-left: 50px; z-index: 1000; user-select: none; cursor: pointer; display. none: } #logo;scrolled { position: absolute; top: 50%; float: left; transform: translateY(-50%); margin-left: 50px; z-index: 1000; user-select: none; cursor: pointer; } #wrapper { background: transparent; display: inline-block; position: absolute; left: 90vw; margin: 20px; padding: 10px; cursor: pointer; z-index: 1000; } #menuTitle { position: relative; top: 2px; color: #222658; font-size: 25px; user-select: none. transition; color.25s linear: };circle { width: 40px; height: 40px; position: relative; cursor. pointer: };line { position: absolute; height: 3px; width: 70%; background-color: #222658; border-radius: 10px. transition, all cubic-bezier(0.26, 0.1, 0.27. 1;55) 0:35s; left. 50px: };top { top. 32%: };middle { top. 53%: };bottom { top. 72%. }.icon:close;top { top: 48%; transform. rotate(45deg). }.icon,close.middle. .icon:close;bottom { transform: rotate(-45deg); top: 48%; }
<html> <body> <nav class="navbar-fixed-top"> <a href="index.html"><img id="logo" src="images/core-logo.png" alt="logo" height="46" width="176"></a> <div id="wrapper"> <div class="circle icon"> <h1 id="menuTitle">Menu</h1> <span class="line top"></span> <span class="line middle"></span> <span class="line bottom"></span> </div> </div> <div class="navigation"> <ul id="nav-list"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="team.html">Team</a></li> <li><a href="services.html">Services</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </nav> </body> </html>
1 个解决方案
解决方案1
0 2020-05-24 15:18:19
I suggest you take a look at some documentations about CSS and browser support.我建议您查看一些有关 CSS 和浏览器支持的文档。 w3schools has a very interesting table with all the tags and its compatibilities. w3schools有一个非常有趣的表格，其中包含所有标签及其兼容性。
Also, there's an answer that might help you figure out webkits: How to provide CSS properties for Different browsers like Mozilla and Chrome此外，还有一个答案可以帮助您了解 webkits： How to provide CSS properties for different browsers like Mozilla and Chrome
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.