Question

我有问题，似乎无法自行修复。

编辑，解决真正的问题。

按钮标记在FF和Safari中的呈现方式不同。在chrome中，按钮没有额外的隐藏填充或边距。

镀铬图像很漂亮，均匀分布并填充所有元素（红色边框），任何地方都没有留下空白区域。

Safari它留下左侧空间。在Firefox中，它留下左侧和顶部一些空间。

如何专门针对safari / ffox定位按钮标签并解决问题？

CSS

.vlp_s_container {
    position: relative;
    /* height: 132px; */
    border: 1px solid red; 
/*  background-color: yellow; */
    width:206px;
}
/* Zoom In #1 */
.vlp_s_hover01 .vlp_s_fig .vlp_s_img {
/*  padding: 0px; */
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.vlp_s_hover01 .vlp_s_fig:hover .vlp_s_img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.vlp_s_button {
    padding: 0px;
    margin-top: 0px;
    line-height: normal;
    display: block;
    border: none;
    text-decoration: none;
}

.vlp_s_button:hover {
    cursor: pointer;
}
.vlp_s_img {
    width: 206px;
    height: 116px;
    padding:0px;
    margin:0px;

}

.vlp_s_fig {
    width: 206px;
    height: 116px;
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
}

HTML

<div class="vlp_s_container" title="Watch This"
            id="abc">
            <div class="vlp_s_hover01 vlp_s_column">
                <figure class="vlp_s_fig">

                    <div>
                        <button class="vlp_s_button">
                            <img class="vlp_s_img"
                                src="https://upload.wikimedia.org/wikipedia/commons/7/76/Jenson_Button_2014_Singapore_FP2.jpg">
                        </button>
                    </div>

                </figure>
            </div>
        </div>

Answer 1

我发现Firefox有自己的填充和<button>标签的边距，使用这个css可以解决firefox的问题

CSS

button::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
}

img，按钮标签在ff和safari中呈现不同

1 个答案: