Question

今天大家好我有与css和firefox的兼容性问题，问题是当我进入我的网站www.fashoop.com时，你可以在一边看一些行标题，如下：

 (GOOGLE CHROME EXAMPLE)

COLOR BLUE AND COLOR CYAN

------------ ---------------- TITLE

这个效果在谷歌浏览器上工作得很好但是当你用firefox explorer输入一行消失的行并且自动放点这样的问题时会出现问题：

 (FIREFOX EXAMPLE)

COLOR BLUE AND COLOR CYAN

------------ TITLE ...

任何人都知道为什么它会在firefox中发生？我希望可以帮助我们！这里是网站链接www.fashoop.com谢谢！

CODE：

span.section-title{
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    text-overflow: ellipsis;

    font: 1.6em/1.1 Georgia;
    padding: .2em 0;
    }
span.section-title:before,
span.section-title:after {
    content: "";
    position: relative;
    display: inline-block;
    width: 50%;
    height: 2px;

    vertical-align: middle;
    background: #000;
    }
span.section-title:before {    
    left: -.5em;
    margin: 0 0 0 -50%;
    background: #ef387a;
    }
span.section-title:after {    
    left: .5em;
    margin: 0 -50% 0 0;
    background: #1c77bd;
    }

Answer 1

似乎text-overflow: ellipsis;是span.section-title的交易破解者或使用较窄的span.section-title:before, span.section-title:after ... 无论如何，有很多选项可以解决这个问题

两侧的线标题不会出现在Firefox中

1 个答案: