HTML – Firefox的奇怪边框问题

发布时间：2020-12-14 22:49:58 所属栏目：资源来源：网络整理

导读：我正在尝试使用CSS创建三角形样式,但边框上会出现一条暗线,如下所示.它仅出现在Firefox中,而不是Chrome或IE中. 造成这种情况的原因以及如何解决这个问题？这是我的代码： HTML： CSS： div{ margin: 20px;}h1{ background: yellow; padding: 30px; position

我正在尝试使用CSS创建三角形样式,但边框上会出现一条暗线,如下所示.它仅出现在Firefox中,而不是Chrome或IE中.

造成这种情况的原因以及如何解决这个问题？

这是我的代码：

HTML：


CSS：

div{
    margin: 20px;

}
h1{
    background: yellow;
    padding: 30px;  
    position: relative;
    color: #FFFFFF;
    float: left;
    margin-right: 20px;  
}

h1:before{
    position: absolute;
    left: 100%;
    top: 0;
    content: "";
    border: 20px solid yellow;
    border-width: 0px 50px 80px 0px;
    border-color: transparent transparent yellow transparent;
}

的jsfiddle：
http://jsfiddle.net/TrQEH/


最佳答案
尝试改变：

border-color: transparent transparent yellow transparent;

至

border-color: transparent #FFF yellow transparent;

已更新jsFiddle
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!