代码之家 › 专栏 › 技术社区 › Jithin Raj P R

CSS箭头在不同浏览器中的位置不同

css-position cross-browser css

Jithin Raj P R · 技术社区 · 7 年前

position:relative 就母公司而言

这在但是在这是另一个故事,箭头(:before)后面的线稍微向左移动。我们能解决这个问题吗。?

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>

1 回复 | 直到 7 年前

Paulie_D 7 年前

我怀疑这是由于 像素舍入 由于使用了分数像素值

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;
}

尝试使用 全像素值 .

推荐文章

Petrolea · SVG-圆圈标记在所有浏览器中的大小都不相同(IE11)

6 年前

Dev Doc · 如何在整个应用程序的所有浏览器中禁用浏览器保存密码提示?[副本]

6 年前

funkysoul · 浏览器之间的CSS颜色差异

6 年前

Rumba · IE11上的addEventListener上未传递参数

6 年前

Basheer Kharoti · microsoft edge extension中未定义chrome

6 年前

Denisa Corbu · appendChild在IE中不工作

7 年前

Rhushikesh · 无法在angular2应用程序中接收存储事件

7 年前

Sod Almighty · 当使用rowspan时,如何在所有浏览器中正确调整表行的大小?

7 年前

Andy · 在文本区域中保存文本的独立于浏览器的方式

7 年前

Jithin Raj P R · CSS箭头在不同浏览器中的位置不同

7 年前