移動端設置了overflow:hidden和border-radius，子元素超出部分不隱藏問題？

時間 2019-12-02

標籤移動設置 overflow hidden border radius 元素超出部分隱藏問題欄目無線简体版

原文原文鏈接

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/SB.css" />
		<style type="text/css">
			.main {
				width: 300px;
				height: 100px;
				border: 1px solid red;
				border-radius: 15px;
				overflow: hidden;
				/*transform:rotate(0deg); */
			}
			
			.con {
				display: block;
				overflow: scroll;
				overflow-y: hidden;
				-webkit-overflow-scrolling: touch;
				white-space: nowrap;
				font-size: 0px;
			}
			
			.item {
				width: 100px;
				height: 100px;
				background: green;
				display: inline-block;
				position: relative;
			}
			
			.item:nth-child(2n) {
				background: red;
			}
			.item p{
				width: 50px;
				height: 20px;
				color: white;
				text-align: center;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 0px;
				background: blue;
				font-size: 12px;
			}
		</style>
	</head>

	<body>
		<div class="main">
			<div class="con">
				<div class="item">
					<p>快點</p>
				</div>
				<div class="item">
					<p>快點</p>
				</div>
				<div class="item">
					<p>快點</p>
				</div>
				<div class="item">
					<p>快點</p>
				</div>
				<div class="item">
					<p>快點</p>
				</div>
			</div>
		</div>
	</body>

</html>
複製代碼

PC

移動端

解決辦法：css

.main {
				width: 300px;
				height: 100px;
				border: 1px solid red;
				border-radius: 15px;
				overflow: hidden;
				transform:rotate(0deg);  /*transform: scale(1);也能夠*/
			}
複製代碼