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 {
    ...
}