I have been developing a largish single page application that will be running on a local lan - ie not open to the public.
(我一直在开发一个大型的单页应用程序，该应用程序将在本地局域网上运行-即不向公众开放。)
That has to support the Chrome browser and iPads. (那必须支持Chrome浏览器和iPad。)
I've got large sections working on Chrome, but I ran across a problem with an iPad with the following section (this full app is made of web components - I've tried to make a fairly minimal test case.
(我在Chrome上有很多工作，但以下部分却遇到了iPad的问题（此完整的应用是由网络组件组成的-我试图做一个相当小的测试用例。)
In the scenario - in Chrome (78) the two date input fields are positioned at the top of a "menu card" in the second quarter in - below that is 16 buttons in a 4 x 4 grid.
(在这种情况下-在Chrome（78）中，两个日期输入字段位于第二个季度中“菜单卡”的顶部-下方，位于4 x 4网格中的16个按钮中。)
The problem is - the same page in Safari (on my Mac (v13.0.3) and on my iPad - running IOS 13.1.3) displays all the components of the grid one over the other.
(问题是-Safari中的同一页面（在我的Mac（v13.0.3）和iPad上，运行IOS 13.1.3）显示网格的所有组件。)
There is a small difference between the Mac, and the iPad. (Mac和iPad之间的差别很小。)
On the latter the dates fields appear to actually be taller than the rest, whereas on the Mac the are entirely hidden. (在后者上，日期字段似乎实际上比其他字段高，而在Mac上，日期字段完全隐藏。)
I've searched for differences between chrome and safari and I can not find any.
(我搜索了chrome和safari之间的差异，但找不到任何差异。)
Have I got the syntax of the CSS wrong?
(我的CSS语法错误吗？)
and then Chrome accepts it and Safari doesn't? (然后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>
ask by akc42 translate from so 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
