gpt4 book ai didi

html - CSS 箭头面包屑在 Firefox 中看起来很模糊

转载 作者:行者123 更新时间:2023-11-27 23:39:38 25 4
gpt4 key购买 nike

我的箭头面包屑在 firefox 中看起来有点模糊,但在 chrome、opera 和 ie 中看起来很好。 CODEPEN

这是它在 firefox 中的样子:

enter image description here

我的 HTML

<div class="row">
<div class="tab-progress btn-breadcrumb clearfix text-center">
<div class="arrow-nav col-xs-4">1</div>
<div class="arrow-nav col-xs-4">2</div>
<div class="active-arrow arrow-nav col-xs-4">3</div>
</div>
</div>

CSS:

body {
padding: 3em;
background: #B9B9B9;
}
.row {
background: white;
}
.btn-breadcrumb .arrow-nav:not(:last-child):after {
content: " ";
display: flex !important;
width: 0;
height: 0;
border-top: 27px solid rgba(255, 255, 255, 0);
border-bottom: 27px solid rgba(255, 255, 255, 0);
border-left: 10px solid white;
position: absolute;
top: 33%;
margin-top: -17px;
left: 100%;
z-index: 3;
}
.btn-breadcrumb .arrow-nav:not(:last-child):before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 27px solid rgba(255, 255, 255, 0);
border-bottom: 27px solid rgba(255, 255, 255, 0);
border-left: 10px solid #E6E6E6;
position: absolute;
top: 33%;
margin-top: -17px;
margin-left: 1px;
left: 100%;
z-index: 3;
}
.btn-breadcrumb .arrow-nav {
padding: 15px 0 15px 0;
}
.btn-breadcrumb .arrow-nav:first-child {
padding: 15px 0 15px 0;
}
.btn-breadcrumb .arrow-nav:last-child {
padding: 15px 0 15px 0;
}
.active-arrow {
background-color: #2a53a5;
color: white;
border-radius: 0;
}
.active-arrow .numberCircle {
color: white;
}
.active-arrow:hover {
color: white;
}
.active-arrow:after {
display: flex !important;
width: 0;
height: 0;
border-top: 17px solid rgba(255, 255, 255, 0);
border-bottom: 17px solid rgba(255, 255, 255, 0);
border-left: 10px solid #2a53a5 !important;
position: absolute;
top: 50%;
margin-top: -17px;
border-radius: 0;
left: 100%;
z-index: 3;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="tab-progress btn-breadcrumb clearfix text-center">
<div class="arrow-nav col-xs-4">1</div>
<div class="arrow-nav col-xs-4">2</div>
<div class="active-arrow arrow-nav col-xs-4">3</div>
</div>
</div>

最佳答案

我想我了解你想要什么,但你的 CSS 有点过时了。

我将 active-arrow 设置为实际创建箭头的那个,这样它就可以准确地知道在哪个箭头上创建箭头,而不管它的位置如何。

body {
padding: 3em;
background: #B9B9B9;
}
.row {
background: white;
}
.btn-breadcrumb .arrow-nav {
padding: 15px 0 15px 0;
}
.btn-breadcrumb .arrow-nav:first-child {
padding: 15px 0 15px 0;
}
.btn-breadcrumb .arrow-nav:last-child {
padding: 15px 0 15px 0;
}
.active-arrow {
background-color: #2a53a5;
color: white;
border-radius: 0;
}
.active-arrow .numberCircle {
color: white;
}
.active-arrow:hover {
color: white;
}
.active-arrow:before {
content: '';
width: 0;
height: 0;
border-top: 25px solid rgba(255, 255, 255, 0);
border-bottom: 25px solid rgba(255, 255, 255, 0);
border-left: 10px solid white;
position: absolute;
left: 0;
top: 0;
}
.active-arrow:after {
content: '';
width: 0;
height: 0;
border-top: 25px dotted white;
border-bottom: 25px dotted white;
border-left: 10px dotted rgba(255, 255, 255, 0);
position: absolute;
top: 0;
right: 0;
}
.arrow-nav:last-child.active-arrow:after {
border: none;
}
.arrow-nav:not(.active-arrow):before {
content: '';
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 10px solid grey;
position: absolute;
right: -10px;
top: 0;
}
.arrow-nav:not(.active-arrow):after {
content: '';
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 10px solid white;
position: absolute;
right: -9px;
top: 0;
}
.arrow-nav:last-child:not(.active-arrow):after,
.arrow-nav:last-child:not(.active-arrow):before {
border: 0;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="tab-progress btn-breadcrumb clearfix text-center">
<div class="arrow-nav col-xs-4">1</div>
<div class="arrow-nav col-xs-4">2</div>
<div class="active-arrow arrow-nav col-xs-4">3</div>
</div>
</div>
<div class="row">
<div class="tab-progress btn-breadcrumb clearfix text-center">
<div class="arrow-nav col-xs-4">1</div>
<div class="active-arrow arrow-nav col-xs-4">2</div>
<div class="arrow-nav col-xs-4">3</div>
</div>
</div>
<div class="row">
<div class="tab-progress btn-breadcrumb clearfix text-center">
<div class="arrow-nav col-xs-4">1</div>
<div class="arrow-nav col-xs-4">2</div>
<div class="arrow-nav col-xs-4">3</div>
</div>
</div>

关于html - CSS 箭头面包屑在 Firefox 中看起来很模糊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32222779/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com