HTML/CSS Safari 和 chrome 上的不同格式

Question

HTML/CSS Safari 和 chrome 上的不同格式

我对创建网站比较陌生，我有一个 HTML/CSS 问题，希望有人能帮助我！

我注意到在 Safari 和 Google Chrome 中，我的灰色框不在它应该在的位置（我假设是因为我将 .veryouter 设为固定像素，但是当我尝试使用百分比并调整页面大小并更改页面大小时，我的文本框开始移出页面！我试图在调整窗口大小时让所有内容保持原位，所以我不确定将其更改为百分比是否是答案..）我附上了图片以显示不同的是，Chrome 是垂直居中，而在 Safari 上则不是）。//代码片段看起来很奇怪，抱歉！

谢谢你的帮助:)我很感激 ![在此处输入图片说明 ] 1

html{
	height: 97%;

}

body{
	background-image: url("Metakingpic.png");
	background-size: 1300px;
	min-width: 1080px;
	height: 100%;
	
}

.veryouter{
	height: 589px;
}

#outer{
  	height: 100%;
  	width: 550px;
  	display: flex;
  	justify-content: center;
  	align-items: center; 
}

#inner{
	position: relative;
  	background-color: #696969;
  	opacity: .5;
	height: 540px;
	width: 370px;
}

h1{
	margin-top: 40px;
	margin-bottom: 0;
}

p{
	margin-top: 40px;
	margin-right: 10px;
}

.words{
	font-family: 'Londrina Outline', cursive;
	color: #ffffff;
	font-size: 55px;
	line-height: 50px;
	letter-spacing: 5px;
	padding-left: 23px;
}

.font2{
	font-family: 'Slabo 27px', serif;
	color: #ffffff;
	font-size: 23px;
	line-height: 32px;
	letter-spacing: 2px;
	margin-left: 20px;
}

.image{
	height: 114px;
	width: 174px;

	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 100;
	font-size: 25px;
}

.arrow{
	position: absolute;
	bottom: 0;
	right: 0;
	padding-right: 15px;
	padding-bottom: 15px;
	z-index: -1;
}

.n{
	padding-top: 25px;
	font-weight: bold;
	color: white;
	width: 125px;
	text-align: center;
	font-size: 30px;
	font-family: 'Londrina Outline', cursive;
	position: relative;
	letter-spacing: 5px;
}

a{
	text-decoration: none;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>
<head>
	<title>Welcome!</title>
	<link href = "intro.css" type = "text/css" rel = "stylesheet">

	<link href="https://fonts.googleapis.com/css?family=Londrina+Outline" rel="stylesheet">
</head>

<body>
	<div class = "veryouter">
		<div id = "outer">
			<div id = "inner">
				<div class = "words">
					<h1>My <br></br>PHOTO<br></br>BOOK</h1>
				</div>
				<div class = "font2">
					<p> Press "NEXT" to continue! </p>
				</div>
			</div>
		</div>
	</div>
	
	<div class = "image">
		<a href = "https://www.facebook.com/" >
			<div class = "n">NEXT</div>
		</a>
			<img class = "arrow" src = "Arrow.png" atl = "Arrow"/>
	</div>
</body>


</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 5

这很可能是因为这两个浏览器具有不同的默认 css 规则，我建议使用 css 重置，或者使用https://meyerweb.com/eric/tools/css/reset/或https://github.com/necolas /normalize.css/

如果您不熟悉这些重置 css - 它们基本上标准化了默认浏览器样式。我个人更喜欢在我所有的项目中使用 normalize.css。

归档时间：	6 年，9 月前
查看次数：	1768 次
最近记录：	6 年，9 月前