html - iPhone 显示我的 CSS 覆盖在图像上的不同结果

Question

显示差异的视觉问题:https://ibb.co/k6dJqyp
图像上的覆盖有问题，对于我的一生，我无法弄清楚为什么 iPhone 的覆盖比图像长。
我试过在多个设备上测试它，不能像在 iPhone 上一样复制这个问题。我试过在浏览器开发工具手机调整大小上复制，没有运气。
编辑:问题已解决，正如下面提到的 safwan，如果您知道要定位哪个元素，请使用 CSS safari hack，更改将在 Safari 上实现:)

Answer 1

每个浏览器都以稍微不同的方式应用 CSS。如前所述，您可以使用 CSS hacks 来仅针对 Safari here ，但这相当复杂。我建议您使用 JavaScript 来查找浏览器。如果您想知道如何准确找到浏览器，请查看 this邮政。但实际功能如下。

function findBrowser() {
    var ua = navigator.userAgent, tem,
    M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem =  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+( tem[1] || '');
    }
    if(M[1] === 'Chrome'){
        tem = ua.match(/\b(OPR|Edge?)\/(\d+)/);
        if(tem != null) return tem.slice(1).join(' ').replace('OPR', 'Opera').replace('Edg ', 'Edge ');            
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
}

if(findBrowser() === 'Safari 13') {
    document.querySelector('img').classList.add("inSafari"); 
}

将“Safari 13”更改为导致问题的 Safari 版本。
然后，在您的样式表中:

.inSafari {
    ...
}