Question

我正在开发一个小型的LESS前端库，我将在未来的项目中使用它。我还打算用开源许可证发布它，当它完成并推断它是有用的。

这个库将包括花哨的Chrome风格标签。使用CS3边界半径的当前实现相当粗糙，并且基于我在互联网上找到的小提琴，它根本没有支持的非webkit浏览器。由于它将用于各种各样的项目，我必须使它与大多数主流浏览器兼容。经过一些调整后，它在FF和Chrome上看起来几乎一样，但在Firefox上它有一些视觉上的故障。

相关的LESS来源部分：

// Tabs
.fancy-tabs(@tab-color; @active-tab-color; @hover-tab-color; @click-tab-color)
{
    margin: 0;
    list-style-type : none;
    line-height : 35px;
    max-height: 35px;
    overflow: hidden;
    display: inline-block;
    padding-right: 20px;

    >li
    {
        .fancy-tab(@tab-color; @active-tab-color; @hover-tab-color; @click-tab-color);
    }
}

.fancy-tab(@tab-color; @active-tab-color; @hover-tab-color; @click-tab-color)
{
    // Links
    a
    {
        // To make the other parts of the tab clickable
        padding: 0 1em;
        margin: 0 -1em;

        display: inline-block;
        // max-width:100%;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
        color: inherit;
    }

    // Styling the tab
    float : left;
    margin : 5px -10px 0;
    border-top-right-radius: 25px 170px;
    border-top-left-radius: 20px 90px;
    padding : 0 30px 0 25px;
    height: 170px;
    background: @tab-color;
    position : relative;
    box-shadow: 0 10px 20px rgba(0,0,0,.5);
    max-width : 200px;
    .transition(all .2s);

    // Indent the first child
    &:first-child
    {
        margin-left: 10px;
    }

    // Fancy rounding
    &:before, &:after{
        content : '';
        background : @transparent;
        height: 20px;
        width: 20px;
        border-radius: 100%;
        border-width: 10px;
        top: 0px;
        border-style : solid;
        position : absolute;
        .transition(inherit);
    }

    &:before{
        border-color : @transparent @tab-color @transparent @transparent;
        .rotate(48deg);
        left: -23px;
    }

    &:after{
        border-color : @transparent @transparent @transparent @tab-color;
        .rotate(-48deg);
        right: -17px;
    }

    // Colorize active tab

    &:active{
      background: @click-tab-color;
    }


    &:hover:before{
      border-color : @transparent @hover-tab-color @transparent @transparent;
    }


    &:hover:after{
      border-color : @transparent @transparent @transparent @hover-tab-color;
    }

    &:active:before{
        border-color : @transparent @click-tab-color @transparent @transparent;
    }


    &:active:after{
        border-color : @transparent @transparent @transparent @click-tab-color;
    }

    &.ac
    {
        z-index: 2;
        background: @active-tab-color !important;

        &:before{
            border-color : @transparent @active-tab-color @transparent @transparent;
        }


        &:after{
            border-color : @transparent @transparent @transparent @active-tab-color;
        }
    }


    // Applying pointer effects
    .hover(highlight, @hover-tab-color);
    .click(highlight, @click-tab-color);
}

使用编译的CSS：http://jsfiddle.net/kdani3/G9QE9/1/

我认为这个问题很可能与Gecko的border-radius渲染引擎有关，但我不知道有什么解决方法。

截图：

如何在Firefox中解决这种视觉故障？

0 个答案: