Flexbox在chrome和firefox中表现不同

时间：2018-02-06 20:59:10

标签： html css css3 flexbox

我正在开发一个非常简单的flexbox图库编辑器。我很快就使用chrome工作了，但是使用Firefox我遇到了麻烦。

这是它在chrome中的样子

Normal display Hover

这就是它在Firefox中的样子

Normal display Hover

通过检查可以发现，Firefox右侧的空间等于添加按钮的宽度。我检查了一些造型但是我的css找不到问题。

这是我的scss和带有CSS的Pastebin的链接：https://pastebin.com/FbAPzM8P 

.gallery-images {
    text-align: center;
    position: relative;
    &.horizontal-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        padding-top: 7.5%;
        padding-left: 2em;
        height: 100%;
        display: flex;
        .gallery-image {
            height: 80%;
            display: flex;
            flex-wrap: wrap;
            flex: 0 0 0;
            .gallery-image-content {
                display: flex;
                flex: 0 0 100%;
                height: 100%;
                .gallery-image-action {
                    width: 8em;
                }
                .gallery-image-content {
                    height: 100%;
                }
                .gallery-image-image, .gallery-image-action {
                    display: flex;
                    height: 100%;
                    > img {
                        height: 100%;
                    }
                }
            }
            .gallery-image-action-bar {
                flex: 0 0 100%;
                padding-right: 10px;
                padding-left: 10px;
                margin-top: -18px;
                .button-bar {
                    margin-left: 7.5em;
                    text-align: left;
                    padding-right: 2px;
                    .button-action-left {
                        float: left;
                    }
                    .button-action-right {
                        float: right;
                        margin-right: -2px;
                    }
                }
            }
        }
    }
    /** different way of displaying the editor **/
    .gallery-image {
        .gallery-image-content {
            .gallery-image-image, .gallery-image-action {
                position: relative;
                border: 10px solid transparent;
                .gallery-image-edit, .gallery-image-add, .gallery-image-edit-button {
                    cursor: pointer;
                    transition: transform 0.3s, background 0.3s, opacity 0.3s;
                    transform: scale3d(1, 1, 1);
                    &:hover {
                        background: darken($gray-100, 6%);
                        transform: scale3d(0.95, 0.95, 1);
                    }
                }
                .gallery-image-edit-button {
                    background: $gray-100;
                    position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 0;
                    z-index: 10;
                    &:hover {
                        opacity: 0.8;
                        border-radius: 4px;
                        + .gallery-image-edit {
                            background: darken($gray-100, 6%);
                            transform: scale3d(0.95, 0.95, 1);
                            border-radius: 4px;
                        }
                    }
                    &::before, &::after {
                        position: absolute;
                        top: 50%;
                        left: 0;
                        margin-top: -0.35em;
                        width: 100%;
                        color: $primary;
                        font-size: 1.5em;
                        font-family: FontAwesome;
                        pointer-events: none;
                    }
                    &::before {
                        content: '\f040';
                    }
                    &::after {
                        margin-top: -0.5em;
                        color: $primary;
                        content: '\f040';
                        font-size: 3em;
                        opacity: 0;
                        transition: opacity 0.3s, transform 0.3s;
                        transform: scale3d(2, 2, 1);
                    }
                }
                .gallery-image-edit {
                    opacity: 1;
                    z-index: 8;
                }
                > div {
                    width: 100%;
                    height: 100%;
                    &.gallery-image-add {
                        border-radius: 4px;
                        background: darken($gray-100, 2%);
                        &::before, &::after {
                            position: absolute;
                            top: 50%;
                            left: 0;
                            margin-top: -0.35em;
                            width: 100%;
                            color: $primary;
                            font-size: 1.5em;
                            font-family: FontAwesome;
                            pointer-events: none;
                        }
                        &::before {
                            content: '\f067';
                        }
                        &::after {
                            margin-top: -0.5em;
                            color: $primary;
                            content: '\f00c';
                            font-size: 3em;
                            opacity: 0;
                            transition: opacity 0.3s, transform 0.3s;
                            transform: scale3d(2, 2, 1);
                        }
                    }
                }
            }
        }
        .gallery-image-action-bar {
            .button-bar {
                .button-action-left {
                    @extend .button;
                    @extend .button.primary;
                }
                .button-action-right {
                    @extend .button;
                    @extend .button.primary;
                }
            }
        }
    }
}

以下是SCSS的重点：https://github.com/Jinya-CMS/Jinya-Gallery-CMS/blob/0af7c5dc7644d35f09de9edb3fbc98a863ececb7/src/DesignerBundle/Resources/public/scss/_gallery-designer.scss

这是呈现的HTML，这里是Firefox呈现的HTML的Pastebin：https://pastebin.com/pjRvdEYJ 

<div class="gallery-images horizontal-scroll" data-source="http://localhost:8000/designer/gallery/artworks/images" data-move="http://localhost:8000/designer/gallery/artworks/%23tempid%23">
    <!-- ko foreach: images -->

    <div class="gallery-image">
        <div class="gallery-image-content">
            <div class="gallery-image-action">
                <div class="gallery-image-add" role="button" data-bind="click: $root.addImage"></div>
            </div>

            <div class="gallery-image-image">
            <div class="gallery-image-edit-button" role="button" data-bind="click: $root.editImage"></div><img data-bind="attr: { src: source }" class="gallery-image-edit" src="https://placebear.com/1920/1080" /></div>
        </div>

        <div class="gallery-image-action-bar">
            <div class="button-bar">
                <!-- ko if: $index() !== 0 --><!-- /ko -->
                <!-- ko if: $index() !== ($parent.images().length - 1) -->
                 <!-- /ko -->
            </div>
        </div>
    </div>

    <div class="gallery-image">
        <div class="gallery-image-content">
            <div class="gallery-image-action">
                <div class="gallery-image-add" role="button" data-bind="click: $root.addImage"></div>
            </div>

            <div class="gallery-image-image">
            <div class="gallery-image-edit-button" role="button" data-bind="click: $root.editImage"></div><img data-bind="attr: { src: source }" class="gallery-image-edit" src="http://localhost:8000//public/content_image/d80dfe5ad6693c43a31019ee9398554fd7cc4470fcec159a427e886ab9634982" /></div>
        </div>

        <div class="gallery-image-action-bar">
            <div class="button-bar">
                <!-- ko if: $index() !== 0 -->
                 <!-- /ko -->
                 <!-- ko if: $index() !== ($parent.images().length - 1) -->
                 <!-- /ko -->
            </div>
        </div>
    </div>

    <div class="gallery-image">
        <div class="gallery-image-content">
            <div class="gallery-image-action">
                <div class="gallery-image-add" role="button" data-bind="click: $root.addImage"></div>
            </div>

            <div class="gallery-image-image">
            <div class="gallery-image-edit-button" role="button" data-bind="click: $root.editImage"></div><img data-bind="attr: { src: source }" class="gallery-image-edit" src="http://localhost:8000//public/content_image/4c58d75659edeb84f342376679c9f5382db0181920f9206fcc7e86648a8246c9" /></div>
        </div>

        <div class="gallery-image-action-bar">
            <div class="button-bar">
                <!-- ko if: $index() !== 0 -->
                 <!-- /ko -->
                 <!-- ko if: $index() !== ($parent.images().length - 1) --><!-- /ko -->
            </div>
        </div>
    </div><!-- /ko -->

    <div class="gallery-image">
        <div class="gallery-image-content">
            <div class="gallery-image-action">
                <div class="gallery-image-add" role="button" data-bind="click: addImage"></div>
            </div>
        </div>
    </div>
</div>

有没有人知道我可以在哪里检查问题，甚至有解决方案？

0 个答案:

没有答案
相关问题
最新问题