1

基本上，我使用 :before sudo 元素（SASS）为带有附加图标的按钮设置样式

.btn {
    @include font-size-px-rem(14px); //font-size
    @include box-sizing(border-box);
    background-color: $yellow;
    font-weight: bold;
    border: 0;
    color: $black;
    cursor: pointer;
    display: inline-block;
    line-height: 14px;
    margin: 0;
    padding: 8px 26px 8px 11px;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;

    white-space: nowrap;
    vertical-align: middle;

    @extend .arial; //my font

    -webkit-appearance: none;

    &:hover,
    &:hover,
    &:focus {
        color: $white;
        background-color: $light-blue;
    }

    &:before {
        @extend .icon__right-big; //font-Icon
        @include font-size-px-rem(15px); //font-size
        position: absolute;
        right: 8px;
        top: 50%;
        margin-top: -8px; //vertically align icon - middle (half font height)
        z-index: 2;

    }
}

这创建了我的按钮，一切都非常完美。

挑战在于使用 OwlCarousel 时。我在每个列出的轮播中都有一个按钮，它仍然显示在桌面上，但不能在移动设备上显示。

Onload 它使用字体图标呈现第一组按钮，但是当滑动到下一个轮播时，它显示按钮，但字体图标在幻灯片完成时消失。每次我通过滑动或单击下一个箭头更改活动轮播时，按钮箭头都会闪烁。

我用谷歌搜索了互联网，没有发现任何人有同样的问题。

我已经在Android（Nexus 4）和iPhone（5s）上对此进行了测试，我认为这是一个渲染问题，但我不知道该怎么想或如何解决这个问题。

任何帮助都可以。

4

1 回答 1

2

注释掉overflow: hidden;动画元素，在我的情况下，如果.btn解决了它。

于 2014-09-03T10:22:21.590 回答