html - Accordion(仅限 html 和 css)适用于 Chrome,但不适用于 Edge 和 Mozilla
问题描述
我正在做一个项目,我使用的是我在这个网站上制作的手风琴:https ://accordionslider.com/
它在 Chrome 上完美运行,但在 Firefox 和 Edge 上运行良好,当我使用我的自定义导航栏时,我的导航栏和我的其他内容之间只有一个差距。当我使用默认的网站时,我在它应该在的中间有一条细线。您可以使用我提供的网站的 HTML/CSS 进行测试
有关信息:
- 火狐浏览器:73.0
- 谷歌浏览器:80.0
- 微软边缘:44
我正在使用 Angular,但我认为它没有任何影响,因为它是一个 CSS/HTML 问题
.accordion {
box-sizing: border-box;
display: flex;
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
width: 100%;
}
.accordion-select {
cursor: pointer;
margin: 0;
opacity: 0;
z-index: 1;
}
.accordion-title {
position: relative;
}
.accordion-title:not(:nth-last-child(2))::after {
border: 1px solid transparent;
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
}
.accordion-title span {
bottom: 0px;
box-sizing: border-box;
display: block;
position: absolute;
white-space: nowrap;
width: 100%;
}
.accordion-content {
box-sizing: border-box;
overflow: auto;
position: relative;
transition: margin 0.3s ease 0.1s;
}
.accordion-select:checked+.accordion-title+.accordion-content {
margin-bottom: 0;
margin-right: 0;
}
/* Generated styles starts here */
.accordion {
border-color: #dedede;
border-radius: 8px;
border-style: solid;
border-width: 1px;
flex-direction: column;
height: auto;
}
.accordion-title,
.accordion-select {
background-color: #ffffff;
color: #7f8787;
width: 100%;
height: 65px;
font-size: 15px;
}
.accordion-select {
margin-bottom: -65px;
margin-right: 0;
}
.accordion-title:not(:nth-last-child(2))::after {
border-bottom-color: rgb(234, 234, 234);
border-right-color: transparent;
}
.accordion-select:hover+.accordion-title,
.accordion-select:checked+.accordion-title {
background-color: #ffffff;
}
.accordion-title span {
transform: rotate(0deg);
-ms-writing-mode: lr-tb;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
padding-left: 33px;
padding-right: 33px;
line-height: 65px;
}
.accordion-content {
background-color: #f7f7f7;
color: #7f8787;
height: 280px;
margin-bottom: -280px;
margin-right: 0;
padding: 30px;
width: 100%;
}
<div class="accordion">
<input type="radio" name="select" class="accordion-select" checked />
<div class="accordion-title"><span>Title</span></div>
<div class="accordion-content">Content</div>
<input type="radio" name="select" class="accordion-select" />
<div class="accordion-title"><span>Title</span></div>
<div class="accordion-content">Content</div>
<input type="radio" name="select" class="accordion-select" />
<div class="accordion-title"><span>Title</span></div>
<div class="accordion-content">Content</div>
</div>
解决方案
推荐阅读
- python - Stylegan2-ada tfrecords - ValueError:轴与数组不匹配,图像将运行一次而下一次无法运行
- javascript - react-native-sound 音频不重现
- python - 如何防止我的模型过度拟合?
- linker - 在执行 asan_init 作为 .preinit_array 的一部分时,是否保证系统中只有一个线程在运行?
- symfony - Symfony - 询问用户密码以访问路由
- azure - Cosmos DB:将数据从一个容器移动到同一数据库中的另一个容器
- c# - 获取所有在 .NET Core 中实现接口并调用函数的类
- python - 由于 OSError 无法安装软件包:[WinError 5] Permission denied
- pandas - 聚合 pandas df 以获取 max 和 min 作为列
- google-api - HttpError 400 请求包含无效参数 Google API Campaign Manager - creatives().insert()