【发布时间】：2020-03-25 07:08:49
【问题描述】：
我一直在开发一个大型单页应用程序，它将在本地局域网上运行——即不向公众开放。这必须支持 Chrome 浏览器和 iPad。
我有很多部分在 Chrome 上工作，但我在 iPad 上遇到了以下部分的问题（这个完整的应用程序由 Web 组件组成 - 我试图制作一个相当简单的测试用例。
在场景中 - 在 Chrome (78) 中，两个日期输入字段位于第二季度“菜单卡”的顶部 - 下方是 4 x 4 网格中的 16 个按钮。
问题是 - Safari 中的同一页面（在我的 Mac (v13.0.3) 和我的 iPad 上 - 运行 IOS 13.1.3）一个接一个地显示网格的所有组件。 Mac 和 iPad 之间存在细微差别。在后者中，日期字段似乎实际上比其他字段高，而在 Mac 上则完全隐藏。
我搜索了 chrome 和 safari 之间的差异，但找不到任何差异。
我是不是把 CSS 的语法弄错了？然后 Chrome 接受它而 Safari 不接受？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>Grid Issue</title>
<base href="/concepts/">
<link rel="shortcut icon" sizes="32x32" href="../images/pas-icon-32.png">
<style>
html {
background: #ffffff;
}
body {
margin: 0;
min-height: 100vh;
font-family: sans-serif;
line-height: 1.5;
letter-spacing: 0.1em;
background-color: #fafafa;
color: #333;
}
</style>
</head>
<body>
<style>
:root {
--pas-button-menu-height: 70px;
--pas-button-menu-width: 225px;
}
.menu-card {
grid-template-rows: auto repeat(auto-fit, minmax(var(--pas-menu-button-height), max-content));
}
.three {
grid-template-columns: repeat(4,var(--pas-menu-button-width));
grid-template-areas:
". selector . ."
"covstat covstatnotx surgstat treat"
"enqstats embassy notreat surgpay"
"surgnopre prebook pricebreak bookstats"
"bookfirst bookclinic bookappt bookdet";
}
.selectors {
display: flex;
flex-direction: column;
}
.three .selectors {
grid-area: selector;
}
#covstat_portrait {
grid-area: covstat;
}
#covstatnotx_portrait {
grid-area: covstatnotx;
}
#surgstat_portrait {
grid-area:surgstat;
}
#treat {
grid-area: treat;
}
#enqstats {
grid-area: enqstats;
}
#embassy {
grid-area: embassy;
}
#notreat {
grid-area: notreat;
}
#surgpay {
grid-area: surgpay
}
#surgnopre {
grid-area: surgnopre;
}
#prebook {
grid-area: prebook;
}
#pricebreak {
grid-area: pricebreak;
}
#bookstats {
grid-area: bookstats;
}
#bookfirst {
grid-area: bookfirst;
}
#bookclinic {
grid-area: bookclinic;
}
#bookappt {
grid-area: bookappt;
}
#bookdet {
grid-area: bookdet;
}
section.menu-container {
display: flex;
flex-direction: column;
align-items: center;
}
section.menu-container > .menu-card {
margin: 40px 0 20px 0;
border-radius: 10px;
padding: 20px;
box-shadow: 0px 0px 38px -2px rgba(0,0,0,0.5);
background-color: white;
display: grid;
grid-gap: 30px;
}
</style>
<section class="menu-container">
<div class="menu-card three">
<div class="selectors">
<input id="startdate" type="date" label="Start Date" .value="1/11/2019"></input>
<input id="enddate" type="date"label="End Date" .value="30/11/2019" ></input>
</div>
<button id="covstat_portrait" >Conversion Statistics</button>
<button id="covstatnotx_portrait">Conversion Statistics (inc No Tx)</button>
<button id="surgstat_portrait">Surgery Statistics</button>
<button id="treat" >Treatments By Surgeon/Clinic</button>
<button id="enqstats">Enquiry and New Patient Stats</button>
<button id="embassy">Special Embassy Patients</button>
<button id="notreat">No Treatment/Not Suitable By Clinic</button>
<button id="bookclinic">Bookings By Clinic</button>
<button id="bookstats">Bookings Summary</button>
<button id="surgnopre">Surgery Booked with no Pre Op Assess done</button>
<button id="prebook">Pre Op Booking Analysis</button>
<button id="bookfirst">Bookings By Date First Booked</button>
<button id="bookappt">Bookings By Appointment Date</button>
<button id="bookdet">Booking By Appointment Date (Detail)</button>
<button id="pricebreak">Price Break Analysis</button>
<button id="surgpay">Surgeon Payments</button>
</div>
</section>
</body>
</html>
【问题讨论】：
标签： google-chrome safari css-grid