Question

我有一张卡片，我在左边显示一张图片，右上角显示一个标题，右下角显示一些标签。在大多数浏览器中，它加载如下：

但是当我在Safari中加载页面时，标签会出现在标题的顶部，如下所示：

而且，当我徘徊＆＃34;加载更多＆＃34;时甚至更奇怪按钮，页面返回到正常状态，因为它应该从头开始（我认为盒子阴影不影响DOM定位）。

事实：

在非活动状态下，＆＃34;加载更多＆＃34;按钮有一个4px的盒子阴影，但当它徘徊时，盒子阴影是没有的。
当我试图完全删除按钮的盒子阴影时，Safari会以错误的方式呈现它并且它保持不变，即使我悬停按钮也是如此。
标签包裹在绝对定位的DIV中，底部为：0。
所有项目的包装（大白圆角矩形）是一个弹性框。
标题和标签DIV包装在相对位置的DIV中。

如何解决此问题？

修改

以下是控制此卡的代码：

＆＃13;

*{
	box-sizing: border-box;
}

body{
	background-color: rgb(239,239,239);
	margin: 0;
}

.grid{
	width: 100%;
	padding: 10px;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	flex-wrap: wrap;
}

@import url('https://fonts.googleapis.com/css?family=Roboto');

.item{
	background-color: rgb(255,255,255);
	font-family: 'Roboto', sans-serif;
	padding: 20px;
	border: 4px solid rgb(232,232,232);
	display: -webkit-box;
	display: flex;
	-webkit-box-flex: 1;
	flex: 1 1 auto;
	margin: 10px;

	-webkit-border-radius: 30px;
	   -moz-border-radius: 30px;
	        border-radius: 30px;
}

.item .info{
	width: 100%;
	position: relative;
}

.item .photo{
	display: inline-block;
	height: 10em;
	width: 10em;
	margin-right: 2.5em;

	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	        border-radius: 50%;

	-webkit-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.1);
	   -moz-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.1);
	        box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.1);
}

.item h1{
	font-weight: 700;
	font-size: 1.5em;
	margin: 0;
}

.item .tags{
	bottom: 0;
	position: absolute;
	display: block;
}

.item .tag{
	background-color: rgb(236,237,240);
	color: rgb(153,153,153);
	text-transform: uppercase;
	padding: 0.6em 2em;
	display: inline-block;
	margin: 0.5em 0.5em 0 0.5em;
	max-width: 14em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	-webkit-border-radius: 1.5em;
	   -moz-border-radius: 1.5em;
		    border-radius: 1.5em;
}

.item .tag.unloaded{
	background-color: rgb(160,160,160);
	color: rgb(255,255,255);

	-webkit-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.1);
	   -moz-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.1);
	        box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.1);
}

.item .tag:first-child{
	margin-left: 0;
}

.item .tag:last-child{
	margin-right:0;
}

.item .tag.unloaded:hover{
	background-color: rgb(100,100,100);
	color: rgb(255,255,255);
	-webkit-box-shadow: none;
	   -moz-box-shadow: none;
	        box-shadow: none;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width, user-scalable=no">
		<title>FlickList</title>

		<link href="css/main.css" rel="stylesheet">
		<link href="css/grid.css" rel="stylesheet">
		<link href="css/components/item.css" rel="stylesheet">
	</head>
	<body>
		<section class="grid">
			<div class="item">
				<img class="photo" src="https://static.pexels.com/photos/26559/pexels-photo-26559.jpg" alt="Forest"/>
				<div class="info">
					<h1>Forest</h1>
					<div class="tags">
						<span class="tag unloaded">Load more</span>
						<span class="tag">Test</span>
					</div>
				</div>
			</div>
		</section>
	</body>
</html>

＆＃13;

.item 是卡片本身（大白圆角矩形）

.item .info 是标题和标签周围相对定位的包装器

.item .tags 是标签包装

.item .tag.unloaded 是＆＃34;加载更多＆＃34;的样式。按钮

奇怪的Safari定位错误

0 个答案: