个人中心
gpt4 book ai didi

html - 仅限 chrome(android)和 safari(iphone)上堆叠的 div 之间的额外空白

转载 作者：行者123 更新时间：2023-11-28 19:13:17 25 4
gpt4 key购买 nike

我的网站在我的笔记本电脑(chrome/windows)上正确显示，包括在移动模拟器中，我遇到了一个问题。但是在 .container-top div 和 .projects div 之间有一个额外的水平空白，它显示在我的像素(chrome)和我 friend 的 iphone/safari 上。它确实在我手机上的 Firefox 上正确呈现。

这是它在我的笔记本电脑上的显示方式(正确，向下箭头和第一张图片之间没有空格):

Correct display on laptop

这是我手机的屏幕截图(不正确 - 向下箭头和第一张图片之间有额外的空白):

Incorrect display on chrome/android

知道为什么会这样吗？

Link to my test site.

下面是 HTML 和 CSS。

@charset "UTF-8";

@font-face	{
	font-family: "Tw Cen MT Bold";
	src: url("font/TCB_____.TTF");
}

@font-face{
	font-family: "Tw Cen MT";
	src: url("font/TCM_____.TTF");
}

/* Body */
html {
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
body {
	font-family: "Tw Cen MT";
	background-color: #ddd;
	color:#000;
	margin: 0;
	padding: 0;
	font-style: normal;
	font-weight: 200;
	font-size: 10px;
}
/* Container */
.container {
	width: 100%;
	margin: 0;
	padding: 0;
	padding-bottom: 0;
	padding-left: 0;
	text-align: left;
	min-height: 100vh;
}
.container-top	{
	display: block;
	position: static;
	height:100vh;
	margin:0;
	padding:0;
	width:100%;
}
	.navlinks {
		position: absolute;
		bottom: 0;
		padding: 0;
		margin: 0;
		z-index: 11;
	}

.projects	{
	display: block;
	position: static;
	width:100%;
	margin:0;
	padding: 0;
}
	.carousel	{
		margin: 0px;
		margin-top: -0.13em;
		margin-bottom: 0.10em;
		padding: 0px;
		left: 0px;
	}
		.carousel-cell	{
			width: 100%;
			height: 850px;
			padding: 0;
			margin:0;
			overflow: hidden;
		}
		.carousel img	{
			display: block;
			margin:0;
			margin-right: auto;
			height: 100%;
			width: auto;
		}

.video4to3	{
	width: 1145px;
	height: 850px;
	margin:0;
	padding:0;
	border: none;
}

.projecttext	{
	width: 95%;
	padding-right: 5%;
	font-size: 48px;
	letter-spacing: 0.02em;
	line-height: 1.146em;
	height: 100%;
	background-color: #e3e3e3;
}
.about	{
	padding: 0px;
	font-size: 48px;
	letter-spacing: 0.02em;
	line-height: 1.146em;
	width: 90vw;
}

b {
	font-family: 'Tw Cen MT Bold';
}
.bigtext	{
	font-family: 'Tw Cen MT Bold';
	position: relative;
	white-space: nowrap;
	text-overflow: clip;
	font-size: 144px;
	line-height: 0.64em;
	padding: 0px;
	margin: 0;
	margin-left:-0.07em;
	vertical-align: bottom;
	z-index: 11;
}
/*.bigtext:hover	{
	text-decoration:line-through;
	text-decoration-style:dotted;
	text-decoration-color: cyan;
}*/
.bigtext a  {
	color: #000;
	text-decoration: none;
}

a:hover {
	color:#000;
	text-decoration:line-through;
	text-decoration-style:dotted;
	text-decoration-color: cyan;
}

/* Smaller phones */
@media (max-width: 320px) {
	
	.bigtext	{
		font-size: 31px;
	}
	.projecttext	{
		font-size: 12px;
	}
	.about	{
		font-size: 12px;
	}
	.carousel	{
		margin-top: -0.02em;
		margin-bottom: 0.03em;
	}
	.carousel-cell	{
		width: 100%;
		height: calc( 100vw * 2 / 3 );
	}
	.carousel-cell img {
		height: 100%;
		width: auto;
	}
	.video4to3	{
		width: calc( 100vw * 2 / 3 * 4 / 3 );
		height: 100%;
	}

}
/* big phones / Small Tablets */
@media (min-width: 321px)and (max-width: 767px) {
	
	.bigtext	{
		font-size: 42px;
	}
	.projecttext	{
		font-size: 16px;
	}
	.about	{
		font-size: 16px;
	}
	.carousel	{
		margin-top: -0.03em;
		margin-bottom: 0.05em;
	}
	.carousel-cell	{
		width: 100%;
		height: calc( 100vw * 2 / 3 );
	}
	.carousel-cell img {
		height: 100%;
		width: auto;
	}
	.video4to3	{
		width: calc( 100vw * 2 / 3 * 4 / 3 );
		height: 100%;
	}

}
/* iPad etc */
@media (min-width: 768px) and (max-width: 1096px) {
	.bigtext	{
		font-size: 72px;
	}
	.about 	{
		font-size: 30px;
	}
	.projecttext	{
		font-size: 30px;
	}
	.carousel	{
		margin-top: -0.1em;
		margin-bottom: 0.1em;
	}
	.carousel-cell	{
		width: 100%;
		height: calc( 100vw * 2 / 3 );
	}
	.carousel-cell img {
		height: 100%;
		width: auto;
	}
	.video4to3	{
		width: calc( 100vw * 2 / 3 * 4 / 3 );
		height: 100%;
	}
}
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ultramoderne&#x2E3A;Architecture&#x2E3A;Providence RI</title>
<link href="css/ultranew.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/flickity.css" media="screen" />
<script src="js/flickity.pkgd.js"></script>
<script src="js/hash.js"></script>
<script>
	function swapText(elem, text)	{
		elem.innerHTML = text;
	}
</script>
</head>
<body>
<!-- Main Container -->
<div class="container">
	<div class="container-top">
		<div class="navlinks">
			<div class="bigtext" style="margin-left: -0.045em;">
				<a href="about.html">ABOUT</a>
				</div>
			<div class="bigtext">
				<a href="index.html" id="top">PROJECTS</a>
				</div>
			<div class="bigtext">&nbsp;</div>
			<div class="bigtext" 
				 style="margin-left:-0.01em; margin-top: -0.02em; overflow-y: hidden; 
						background-image: url('images/down-arrow.svg'); background-repeat: no-repeat;"><a href="#top" style="overflow: hidden; margin:0; padding:0;">&nbsp;&nbsp;&nbsp;</a>
			</div>
		</div>
	</div>
  <div class="projects">	
		<div class="carousel" data-flickity='{ "cellAlign": "left", "pageDots": false, "draggable": ">1", 
											 "wrapAround": true, "prevNextButtons": false, "hash": true , "lazyLoad": 2 }'>
			<div class="carousel-cell" id="p101">
				<img data-flickity-lazyload="./images/vacant01.gif" />
			</div>
			<div class="carousel-cell" id="p102">
				<div class='projecttext'>An oversize textile hangs within the industrial warehouse: a floating tabula rasa. The lightweight fabric hangs in a subtle catenary shape, creating new spaces and environments without the construction of a single wall. Monumental voids cut into the fabric lightly define rooms within the larger space, while a careful choreography allows the textile to animate between states twice during the night: from a low&mdash;lying plane that clears the space to floating overhead canopy&mdash;and back again.<br /><br />Table's Clear was an installation for the Architectural League of New York's Beaux Arts Ball 2016.</div>
			</div>
			<div class="carousel-cell" id="p103">
				<img data-flickity-lazyload="./images/rwp_01.jpg" />
			</div>
			<div class="carousel-cell" id="p104">
				<img data-flickity-lazyload="./images/stl17.jpg" />
			</div>
	  	</div>
		<div class="bigtext" style="margin-left:-0.02em">
			VACANT PROVIDENCE
	  </div>
		<div class="carousel" data-flickity='{ "cellAlign": "left", "pageDots": false, "draggable": ">1", 
											 "wrapAround": true, "prevNextButtons": false, "hash": true , "lazyLoad": 2 }'>
			<div class="carousel-cell" id="p201">
				<img data-flickity-lazyload="./images/triennial01.jpg" />
			</div>
			<div class="carousel-cell" id="p202">
				<div class='projecttext'>An oversize textile hangs within the industrial warehouse: a floating tabula rasa. The lightweight fabric hangs in a subtle catenary shape, creating new spaces and environments without the construction of a single wall. Monumental voids cut into the fabric lightly define rooms within the larger space, while a careful choreography allows the textile to animate between states twice during the night: from a low&mdash;lying plane that clears the space to floating overhead canopy&mdash;and back again.<br /><br />Table's Clear was an installation for the Architectural League of New York's Beaux Arts Ball 2016.</div>
			</div>
			<div class="carousel-cell" id="p203">
				<img data-flickity-lazyload="./images/rwp_01.jpg" />
			</div>
			<div class="carousel-cell" id="p204">
				<iframe class="video4to3" src="https://player.vimeo.com/video/152848442?title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
			</div>
	</div>
		<div class="bigtext" >
			RISD TRIENNIAL
			</div>	
		<div class="bigtext">
			<a href="buildings.html" id="top">BUILDINGS</a>
			</div>
		<div class="bigtext">
			<a href="index.html">ULTRAMODERNE</a></div></div></div></body></html>

最佳答案

直接来自 Google 开发者网站:https://developers.google.com/web/updates/2016/12/url-bar-resizing问题在于，将 height: 100vh 赋予不是 position: fixed 的元素会调整元素的大小，就好像始终显示滚动条一样。同样的事情似乎也发生在 iOS 中:https://medium.com/@susiekim9/how-to-compensate-for-the-ios-viewport-unit-bug-46e78d54af0d

关于html - 仅限 chrome(android)和 safari(iphone)上堆叠的 div 之间的额外空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58924616/

25 4 0
文章推荐： iphone - 如何启动有关设备类型的特定 View
文章推荐： javascript - List.js 返回错误结果
文章推荐： iphone - UITableView 中的自定义布局
文章推荐： ios - 在 Xcode 中左对齐部分文本，右对齐部分文本
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com