Question

我想让我的网站的每个浏览器页面都相同，但它在chrome中与safari不同。有人想帮我吗？

＆＃13;

body{
	background-image: url("http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/10/Forest-Wallpaper-HD-12.jpg");
	max-width: 100%;
	max-height: 100%;
	background-size: 1500px 1000px;
	background-attachment: fixed;
}

.header{
	background-color: #000000;
	opacity: 0.8;
	height: 2500px;
	width: 1000px;
	background-position: center center; 
}

.header h1{
	color: red;
	size: 50px;
}

.top-banner{
	background-color: #D1D1D1;
	opacity: 0.8;
	height: 75px;
	top: 100%;
	width: 100%;
	
}

.top-banner a {
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	font-family: Gang Of Three, alba, serif;
	color: rgba(134,130,255,1);
	
}

.top-banner a:hover {
	color: #FFFFFF;
	opacity: 0.7;	
}

.top-banner img {
position: relative;
top: 15px;
	
}


}

.lol {
	text-decoration: none;
	list-style-type: none;
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	word-spacing: 250px;
}

.top-banner li {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	word-spacing: 250px;
}

.header p {
	color: cyan;
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<title>Nexus Arts</title>
		<link rel="stylesheet" type="text/css" href="layout.css">
		<style>
a:hover {
		color: #FFFFFF;
		opacity: 0.7;	
}
		</style>
	</head>
	<body>
	<div class="top-banner">
	<ul class="lol">
		<li><font color="Black" size="5px"><a href="index.html">Home</a>             <a href="projects.html">Projects</a>	      <img src="assets/imgs/nexus.jpg" width="58px" height="42px">					<a href="Staff.html">Staff</a>			<a href="Help.html">Help</a></font></li>
	</ul>
	</div>
	<center><div class="header">
	<center><h1>Hello Everyone</h1></center>
	<center><h1>This Website is still in BETA</h1></center>
	<center><p>Welcome to anybody that went on this website</p></center>
	<center><p>Our initial release is March 13th 2017</p></center
	</div></center
	</body>
</html>

＆＃13;

Chrome：enter image description here Safari：enter image description here

如果你们有任何建议，我需要他们或只是编辑我的代码：）

Answer 1

为什么要将所有导航链接放在同一个<li>中？这会导致不同的行为，每个浏览器以不同的方式处理空白区域。

将每个条目放在自己的<li>中，然后使用CSS将它们正确放置。

Answer 2

当您遇到编码问题时，首先检查每个开口是否有一个封闭的括号和html是一个令人头疼的问题，html是每个开口标记的结束标记（如果它需要一个。）

下面我们可以看到两个关闭中心标签缺少“＆gt;”：

{{ csrf_token }}

大多数浏览器似乎都会停止阅读
之后的任何代码

我们在.css文件中看到了相反的东西，其中有一个额外的“}”：

<center><p>Welcome to anybody that went on this website</p></center>
<center><p>Our initial release is March 13th 2017</p></center
</div></center
</body>

同样，该支架下面的任何样式信息都可能会丢失，具体取决于浏览器。

其他浏览器的布局不同

2 个答案: