时间戳

首页 > 解决方案 > 位置：Mac 和 Windows 设备在 Google Chrome 上的粘性不一致

html - 位置：Mac 和 Windows 设备在 Google Chrome 上的粘性不一致

问题描述

运行代码时请注意，如果不在全屏模式下运行，间距会被丢弃。

我在使用 position: sticky 某些表格元素时遇到问题。问题是这个差距，在前三个表格行之间可以看到。这种差距似乎只存在于 Mac 设备上的 Google Chrome 上。在 Google Chrome 上的 windows 设备上没有间隙。

我们还测试了其他浏览器，表格在所有浏览器中都能正常显示。似乎只有 Mac Chrome 有这个问题。

作为参考，这里是使该表的三行具有粘性的代码。CSS 的其余部分是非常标准的表格样式。

.follow1{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  top:0;
  z-index:2;
}
.follow2{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  top:8.5%;
  background:#f9f9f9 !important;
}
.follow3{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  top:14.5%;
  background:#f9f9f9 !important;
  color:black !important;
  border-bottom:1px dotted lightgray;
}

/*==========Decorative css==========*/
.offer-table table{
  border-collapse: separate;
  border-spacing: 15px 0px;
}
.offer-table table td{
  font-size:16px;
  padding:1rem;
  border-top:1px dotted lightgray;
}
.offer-table .table-orange td{
  color:#ff612c;
  border-top:none;
  font-size:20px;
}
.offer-table table td:first-child{
  text-align:right;
}
.offer-table table td:not(:first-child){
  border-left:1px solid lightgray;
  border-right:1px solid lightgray;
  background:#f9f9f9;
  text-align:center;
  width:25%;
}
.offer-table table thead td{
  border:none;
  color:white;
}
.offer-table table thead td:not(:first-child){
  font-weight:bold;
  font-size:18px;
  line-height:1.2rem;
  padding:1.5rem;
}
.offer-table table thead td:nth-child(2){
  background:#554971;
  border:1px solid lightgray;/*These need to change*/
  border-bottom:none;
}
.offer-table table thead td:nth-child(3){
  background:#63768d;
  border:1px solid lightgray;/*These need to change*/
  border-bottom:none;
}
.offer-table table thead td:nth-child(4){
  background:#8ac6d0;
  border:1px solid lightgray;/*These need to change*/
  border-bottom:none;
}
.offer-table .table-colors td:nth-child(2),.offer-table .table-colors td:nth-child(3){
  color:#0095ff;
}
.red{
  color:#ff612c !important;
}
.offer-table .table-colors td:nth-child(4){
  color:#ff612c;
}

.offer-table .black td:nth-child(4),.offer-table .custom-color-1 td:nth-child(3),.offer-table .custom-color-2 td:nth-child(2){
  color:black;
}
.offer-table .custom-color-2 td:nth-child(3){
  color:#ff612c;
}
.color-blue td:nth-child(4){
  color:#0095ff !important;
}
.cta-table div{
  width:100%;
}
.cta-table{
  border-bottom:1px solid lightgray;
}
.white{
  background:white !important;
}
<div class="offer-table">
<table>
<thead>
<tr class="table-headings">
<td class="follow1 white">&nbsp;</td>
<td class="follow1">Successful Business<br>Edition</td>
<td class="follow1">Successful Practice<br>Edition</td>
<td class="follow1">Start Up Practice<br>Edition</td>
</tr>
<tr class="table-orange">
<td class="follow2 white">Upfront License</td>
<td class="follow2">$13,996</td>
<td class="follow2">$9,995</td>
<td class="follow2">$7,995</td>
</tr>
<tr>
<td class="follow3 white">Ongoing Monthly License</td>
<td class="follow3">$139.95</td>
<td class="follow3">$119.95</td>
<td class="follow3">$59.95</td>
</tr>
</thead>
<tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="table-colors">
<td><a href="https://google.ca" target="_blank" rel="noopener"><strong>Staff Access</strong></a></td>
<td>5 Staff Users<br><em>Additional Staff $10 user/month</em></td>
<td class="red">✖&lt;/td>
<td>✖&lt;/td>
</tr>
<tr>
<td><a href="https://google.ca" target="_blank" rel="noopener"><strong>Business Procedure Manuals</strong></a></td>
<td>All<br>Manuals</td>
<td>All<br>Manuals</td>
<td>Choice of<br>One Manual</td>
</tr>
<tr class="table-colors">
<td>Quickbooks Desktop</td>
<td>check</td>
<td>check</td>
<td>✖&lt;/td>
</tr>
<tr class="table-colors">
<td>Quickbooks Online</td>
<td>check</td>
<td>check</td>
<td>✖&lt;/td>
</tr>
<tr>
<td><a href="https://google.ca" target="_blank" rel="noopener"><strong>Online Certification Programs</strong></a></td>
<td>All<br>Certification Programs</td>
<td>All<br>Certification Programs</td>
<td>Choice of<br>One Certification Program</td>
</tr>
<tr class="table-colors">
<td>Quickbooks Desktop</td>
<td>check</td>
<td>check</td>
<td>✖&lt;/td>
</tr>
<tr class="table-colors">
<td>Quickbooks Online</td>
<td>check</td>
<td>check</td>
<td>✖&lt;/td>
</tr>
<tr>
<td><a href="https://google.ca" target="_blank" rel="noopener"><strong>Standard Operating Procedure Checklists</strong></a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="table-colors color-blue">
<td>Client Automation Implementation Checklists</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Session Checklist</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Filing Checklist</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Year End Checklist</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Payroll Checklist</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Quarterly Reporting Checklist</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Quarterly Finance Fitness Review Checklists</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr>
<td><a href="https://google.ca" target="_blank" rel="noopener"><strong>Sales &amp; Marketing Module</strong></a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="table-colors color-blue">
<td>Business Identity Template</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Website Templates</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors">
<td>Sales Conversion Scripts</td>
<td>check</td>
<td>check</td>
<td>✖&lt;/td>
</tr>
<tr class="table-colors">
<td>Sales Presentation Scripts</td>
<td>check</td>
<td>check</td>
<td>✖&lt;/td>
</tr>
<tr class="table-colors">
<td>Referral System</td>
<td>check</td>
<td>check</td>
<td>✖&lt;/td>
</tr>
<tr class="table-colors">
<td>Networking System</td>
<td>check</td>
<td>check</td>
<td>✖&lt;/td>
</tr>
<tr class="table-colors">
<td>Marketing Templates</td>
<td>check</td>
<td>check</td>
<td>✖&lt;/td>
</tr>
<tr class="table-colors">
<td>Sales Conversion Scripts</td>
<td>check</td>
<td>check</td>
<td>✖&lt;/td>
</tr>
<tr>
<td><a href="https://google.ca" target="_blank" rel="noopener"><strong>Human Resources Module</strong></a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="table-colors">
<td>Advertising Templates &amp; Guidelines</td>
<td>check</td>
<td>check</td>
<td>✖&lt;/td>
</tr>
<tr class="table-colors">
<td>Applicant Filter</td>
<td>check</td>
<td>check</td>
<td>✖&lt;/td>
</tr>
<tr class="table-colors">
<td>Phone Qualification Process</td>
<td>check</td>
<td>check</td>
<td>✖&lt;/td>
</tr>
<tr class="table-colors">
<td>Candidate Skills &amp; Speed Test</td>
<td>check</td>
<td>check</td>
<td>✖&lt;/td>
</tr>
<tr class="table-colors">
<td>Interview Questions &amp; Evaluation</td>
<td>check</td>
<td>check</td>
<td>✖&lt;/td>
</tr>
<tr class="table-colors">
<td>New Hire Onboarding Program</td>
<td>check</td>
<td>check</td>
<td>✖&lt;/td>
</tr>
<tr class="table-colors">
<td>New Hire Training Program</td>
<td>check</td>
<td>check</td>
<td>✖&lt;/td>
</tr>
<tr>
<td><a href="https://google.ca" target="_blank" rel="noopener"><strong>Standard Operating Procedures Cloud Apps</strong></a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="table-colors color-blue">
<td>Workflow/Practice Management Software</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Document Retrieval</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Document Storage</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>CRM</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Time Tracking</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Payment Apps</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Virtual Communication</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Payroll Apps</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Value Added Service Apps</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>E-Signatures</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Security</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Accounting Software Dashboards</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr>
<td><a href="https://google.ca" target="_blank" rel="noopener"><strong>Business Success Support</strong></a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="table-colors color-blue">
<td>Unlimited Support</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Unlimited Updates</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Monthly Success Calls</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Weekly Group Mentoring Calls</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Exclusive Licensee Only Facebook Group</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Knowledge Base Forums</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors color-blue">
<td>Guided Implementation and Getting Started Program</td>
<td>check</td>
<td>check</td>
<td>check</td>
</tr>
<tr class="table-colors">
<td>Access to Monthly Group Mastermind</td>
<td>check</td>
<td>check</td>
<td>✖&lt;/td>
</tr>
<tr class="table-colors custom-color-2">
<td><a href="https://google.ca" target="_blank" rel="noopener"><strong>Accelerate 2 Advisor</strong></a><br><em>Mentoring Program</em></td>
<td><em>Can be Added<br>$10,000 Anually</em></td>
<td>✖&lt;/td>
<td>✖&lt;/td>
</tr>
</tbody>
<tfoot>
<tr>
<td>&nbsp;</td>
<td class="cta-table"></td>
<td class="cta-table"></td>
<td class="cta-table"></td>
</tr>
</tfoot>
</table>
</div>

前三个表格行包含适当的类，以使它们都相互滚动。预期的效果是让表格的前三行随着用户滚动表格的其余部分。

标签： htmlcssgoogle-chromecss-positionsticky

解决方案

推荐阅读