Question

我一直在构建的网站的首页，以便学习一些Web开发在我在Safari（Windows）上测试的所有浏览器中运行良好。我有一个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;
}

任何想法我做错了什么？

Answer 1

你可以试试这个

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

Answer 2

-webkit-height否决了正常身高，因为该值为100%，它将与.main一样高。这只发生在Safari（以及其他一些WebKit浏览器）中，因为Chrome无法识别-webkit-height。

Answer 3

Safari 5.1.7是为Windows开发的Safari的最新版本。它在2012年之前发布，因此它不支持大多数新的CSS3属性。

100vh在Windows中的Safari中不起作用吗？

3 个答案: