html - 100vh 在 Windows 的 Safari 中不起作用吗?

标签 html css safari cross-browser

我一直在为学习一些网络开发而建立的网站的首页在我测试过的所有浏览器(windows)上运行良好,除了 safari。我有一个 html 步骤,因此我将部分样式设置为 100vw 和 100vh。在 safari 中,它们的高度似乎为 0;

<body>
    <div id="wrapper">
        <div class="main">
            <section id="slide-one" class="slide"></section>
            <section id="slide-two" class="slide"></section>
.
.
.

以及 css 的总结:

.slide {
    position: relative;
    padding-top: 0px;
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

知道我做错了什么吗?

最佳答案

你可以试试这个

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
    //alert('Its Safari');
    $('.main').css('min-height', '650px');
}

虽然 100vh css 属性在 Mac 默认的 safari 浏览器上工作。但在 Windows 的 Safari 中无法正常工作。

引用链接 Detect Safari using jQuery

关于html - 100vh 在 Windows 的 Safari 中不起作用吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35562109/

相关文章:

javascript - 带音频标签的 Safari 浏览器不起作用

html - Chrome 不透明度过渡错误

javascript - 导入.js脚本点击无响应

jquery - 如何使用 bootstrap collapse 制作 3 个状态

Javascript 函数未实现

jquery - 动态改变CSS

javascript - # url 部分隐藏和显示

图片的 CSS 高度属性

jquery - 选择上的 addClass()

javascript - event.preventDefault() 适用于 Chrome、Firefox,但不适用于 Safari