我的CSS似乎工作正常。甚至变量也可以很好地工作。但是我的问题是，当我使用浏览器（使用Chrome）时，手风琴的各个部分由于某些原因而分开。
我知道用户放大到这一程度的可能性很小，但是我希望该解决方案能够正常工作。
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<!--jQuery file referenced to allow document ready loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--END jQuery Reference-->
<style type="text/css">
:root {
--bar_width_height: 400px;
--Import_Height: 15px;
--bar_thickness: 50px;
--page_size: calc(50px + var(--bar_width_height));
--half_bar_width_height: calc(var(--bar_width_height)/2);
--negative_bar_width_height: calc(0px - var(--bar_width_height));
--half_bar_thickness: calc(var(--bar_thickness)/2);
--translateY: calc(var(--half_bar_width_height) - var(--half_bar_thickness));
--translateX: calc(var(--half_bar_width_height) - var(--half_bar_thickness));
--translateX2: calc(var(--translateY) - 1px);
--translateY2: calc(var(--translateY) - 5px);
--Calculated_Import_Height: calc(var(--translateY) - var(--half_bar_thickness) - var(--Import_Height));
}
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
height: var(--bar_thickness);
}
.panel-default>.panel-heading {
color: #333;
background-color: #f5f5f5;
border-color: #ddd;
}
.panel {
margin-bottom: 2px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.accordion-wrapper {
display: block;
height: 350px;
max-height: 100%;
}
#accordion {
max-width: var(--bar_width_height);
margin-left: 15px;
}
.panel-group {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(-300px) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-300px) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-300px) rotate(-90deg);
-o-transform-origin: right top;
transform: translateX(var(--negative_bar_width_height)) rotate(-90deg);
transform-origin: right top;
margin-bottom: 15px;
}
.panel-body {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0%) rotate(90deg);
-webkit-transform-origin: left top;
-moz-transform: translateX(0%) rotate(90deg);
-moz-transform-origin: left top;
-o-transform: translateX(0%) rotate(90deg);
-o-transform-origin: left top;
transform: translateX(0%) rotate(90deg);
transform-origin: left top;
height: var(--page_size);
position: relative;
}
.h4 {
transform: translateX(25%) translateY(-98rem)rotate(0deg);
margin-bottom: 15px;
}
.h4 {
font-size: 1.5rem;
}
.header_label {
font-family: inherit;
font-weight: 500;
line-height: 1.2;
font-size: 1.5rem;
color: #000;
}
.header_bar {
text-align: center;
border-radius: 0px 50px 50px 0px;
height: var(--bar_thickness);
transform: translateX(var(--translateX2)) translateY(var(--translateY2)) rotate(90deg);
background-color: #20c997;
;
}
.import_here {
transform: translateX(var(--Calculated_Import_Height)) translateY(var(--translateY2)) rotate(90deg);
margin-bottom: 15px;
"
}
td {
height: 50px;
}
}
</style>
<!-- Start Lower Accordian -->
<div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="accordion-wrapper">
<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">
<div class="panel panel-default">
<div class="panel-heading" id="headingOne" role="tab" style="border-color:#676668; background-color: #676668; padding: 10px 45px; text-align:right; ">
<h4 class="panel-title">
<a aria-controls="collapseOne" aria-expanded="true" data-toggle="collapse" href="#collapseOne" role="button" style="color: #000;">Rulesets</a>
</h4>
</div>
<div aria-labelledby="headingOne" class="panel-collapse collapse in show" id="collapseOne" role="tabpanel">
<div class="header_bar" style="border-color:#676668; background-color: #676668; ">
<a aria-controls="collapseOne" aria-expanded="true" class="header_label" data-toggle="collapse" href="#collapseOne" role="button">Rulesets</a>
</div>
<div class="import_here">Page A</div>
<div class="panel-body"></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingTwo" role="tab" style="border-color:#F8BE2E; background-color: #F8BE2E; padding: 10px 45px; text-align:right; ">
<h4 class="panel-title">
<a aria-controls="collapseTwo" aria-expanded="false" class="collapsed" data-toggle="collapse" href="#collapseTwo" role="button" style="color: #000;">Rule Details</a>
</h4>
</div>
<div aria-labelledby="headingTwo" class="panel-collapse collapse" id="collapseTwo" role="tabpanel">
<div class="header_bar" style="border-color:#F8BE2E; background-color: #F8BE2E;">
<a aria-controls="collapseTwo" aria-expanded="true" class="header_label" data-toggle="collapse" href="#collapseTwo" role="button">Rule Details</a>
</div>
<div class="import_here">Page B</div>
<div class="panel-body"></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingThree" role="tab" style="border-color:#FED561; background-color: #FED561; padding: 10px 45px; text-align:right; ">
<h4 class="panel-title">
<a aria-controls="collapseThree" aria-expanded="false" class="collapsed" data-toggle="collapse" href="#collapseThree" role="button" style="color: #000;">Thresholds</a>
</h4>
</div>
<div aria-labelledby="headingThree" class="panel-collapse collapse" id="collapseThree" role="tabpanel">
<div class="header_bar" style="border-color:#FED561; background-color: #FED561;">
<a aria-controls="collapseThree" aria-expanded="true" class="header_label" data-toggle="collapse" href="#collapseThree" role="button">Thresholds</a>
</div>
<div class="import_here">Page C</div>
<div class="panel-body"></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingFour" role="tab" style="border-color:#FFE497; background-color: #FFE497; padding: 10px 45px; text-align:right; ">
<h4 class="panel-title">
<a aria-controls="collapseFour" aria-expanded="false" class="collapsed" data-toggle="collapse" href="#collapseFour" role="button" style="color: #000;">Rebates</a>
</h4>
</div>
<div aria-labelledby="headingFour" class="panel-collapse collapse" id="collapseFour" role="tabpanel">
<div class="header_bar" style="border-color:#FFE497; background-color: #FFE497; ">
<a aria-controls="collapseFour" aria-expanded="true" class="header_label" data-toggle="collapse" href="#collapseFour" role="button">Rebates</a>
</div>
<div class="import_here">
<div>
Page D
</div>
</div>
<div class="panel-body"></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingFive" role="tab" style="border-color:#FFF1CE; background-color: #FFF1CE; padding: 10px 45px; text-align:right; ">
<h4 class="panel-title">
<a aria-controls="collapseFive" aria-expanded="false" class="collapsed" data-toggle="collapse" href="#collapseFive" role="button" style="color: #000;">Invoices</a>
</h4>
</div>
<div aria-labelledby="headingFive" class="panel-collapse collapse" id="collapseFive" role="tabpanel">
<div class="header_bar" style="border-color:#FFF1CE; background-color: #FFF1CE;">
<a aria-controls="collapseFive" aria-expanded="true" class="header_label" data-toggle="collapse" href="#collapseFive" role="button">Invoices</a>
</div>
<div class="import_here">Page E</div>
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Lower Accordian -->