时间戳

首页 > 解决方案 > Safari 截取图片包括 ( png, svg )

html - Safari 截取图片包括 ( png, svg )

问题描述

图像在除 safari 之外的其他浏览器上正常显示，例如 chrome、firefox。野生动物园似乎切断了图像

以下是使用chrome和firefox时的正确行为

在此处输入图像描述

在 safari 中砍掉图像

在此处输入图像描述

我的 HTML 5 代码是

<div class="sound-control" style="position: absolute;left:0;top:0">
        <button  class="sound-control-item" id="mute-btn">
            <img src="/assets/On_trans.svg" />
        </button>
        <button  class="sound-control-item" id="unmute-btn">
            <img src="/assets/Off_trans.svg" alt="">
        </button>
    </div>

我的 CSS3 代码是

.sound-control{
    padding:10px;
    z-index:1000000;

}
.sound-control-item{
    width:40px;
    height: 40px;
    font-size:18px;
    outline:none;
    color:white;
    z-index:9999999;
    background-color:transparent;
    border-radius:100%;
    border-color:transparent;
    border:none; 
}
#mute-btn{
    display: none;
}

我还尝试了以下 stackoverflow 答案，但没有运气。

1 - Safari 截断底部的固定图像？

2 - iOS - Safari - 图像未完全渲染/截断

标签： htmlcsssafari

解决方案

我的问题解决了。罪魁祸首是按钮的高度和宽度属性。我给了图像width:50px（它是按钮的子元素），而按钮（在这种情况下是父元素）是width:40px.

Chrome 和 Firefox 似乎可以自动处理这个宽度问题，但 safari 无法处理这个问题。

sound-control-item{
    width:50px; # I changed this from 40px -> 50px
    height:auto; # I changed this from 40px -> auto
    font-size:18px;
    outline:none;
    color:white;
    z-index:9999999;
    background-color:transparent;
    border-radius:100%;
    border-color:transparent;
    border:none; 
}

推荐阅读