CSS箭头在不同浏览器中的定位不同
CSS arrow positioning different in different browsers
箭头线的位置在不同的浏览器中会发生变化。我们能不能解决这个问题。我在父级上使用了 position:relative
,所以 这不是一个重复的问题。
这在 Chrome 中完美运行,但在 Firefox 中是另一回事,箭头后面的行(:之前) 将其位置稍微向左移动。我们能解决这个问题吗?
span{
font-size: 13px;
margin-top: 5px;
font-weight: 600;
vertical-align: top;
position: relative;
padding-left: 12px;
color:#00C16D;
}
span.up:after {
content: '';
position: absolute;
border-left: 4.5px solid rgba(181, 41, 41, 0);
border-bottom: 8px solid #00C16D;
border-right: 4.5px solid rgba(221, 221, 221, 0);
top: 0px;
left: 0;
}
span.up:before {
content: '';
position: absolute;
border-left: 3px solid #00C16D;
bottom: 3px;
left: 11%;
height: 8px;
}
<span class="up">Up</span>
我怀疑这是由于 像素舍入 由于使用小数像素值
span.up:after {
content: '';
position: absolute;
border-left: 4.5px solid rgba(181, 41, 41, 0);
border-bottom: 8px solid #00C16D;
border-right: 4.5px solid rgba(221, 221, 221, 0);
top: 0px;
left: 0;
}
尝试使用整个像素值。
箭头线的位置在不同的浏览器中会发生变化。我们能不能解决这个问题。我在父级上使用了 position:relative
,所以 这不是一个重复的问题。
这在 Chrome 中完美运行,但在 Firefox 中是另一回事,箭头后面的行(:之前) 将其位置稍微向左移动。我们能解决这个问题吗?
span{
font-size: 13px;
margin-top: 5px;
font-weight: 600;
vertical-align: top;
position: relative;
padding-left: 12px;
color:#00C16D;
}
span.up:after {
content: '';
position: absolute;
border-left: 4.5px solid rgba(181, 41, 41, 0);
border-bottom: 8px solid #00C16D;
border-right: 4.5px solid rgba(221, 221, 221, 0);
top: 0px;
left: 0;
}
span.up:before {
content: '';
position: absolute;
border-left: 3px solid #00C16D;
bottom: 3px;
left: 11%;
height: 8px;
}
<span class="up">Up</span>
我怀疑这是由于 像素舍入 由于使用小数像素值
span.up:after {
content: '';
position: absolute;
border-left: 4.5px solid rgba(181, 41, 41, 0);
border-bottom: 8px solid #00C16D;
border-right: 4.5px solid rgba(221, 221, 221, 0);
top: 0px;
left: 0;
}
尝试使用整个像素值。