100vh不适用于Safari浏览器吗？

我一直在建设一个网站的首页，以了解一些网页开发在所有浏览器中都能很好地工作，我已经在除Safari之外的其他浏览器上进行了测试。我有一个HTML步骤，我有部分风格是100vw和100vh。在safari上它们看起来有0的高度;100vh不适用于Safari浏览器吗？

<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; 
}

任何想法我做错了吗？

来源

2016-02-22 DB1500

-webkit-height推翻了正常高度，并且因为值为100%它将会高达.main。这只发生在Safari（也可能是其他一些WebKitbrowsers），因为Chrome无法识别-webkit-height。

来源

2016-02-22 19:36:20 LarsW

感谢您的快速响应。不幸的是，这并没有改变。以下是供您参考的网站：www.teamthie.com – DB1500

@ DB1500不幸的是，我无法测试Safari。根据[我可以使用]（http://caniuse.com/#feat=viewport-units），我能想到的唯一的事情就是对视口单元的支持，但它们在6.1以后的Safari浏览器中都很好用。 – LarsW

@ DB1500伟大的网站实际上是运行和可以检查！很多时候，开发者/用户会将链接发布到他们目前正在使用的网站上，并且一旦错误/错误/问题被回答/完成，链接就会失效。谢谢。 – lowtechsun

你可以试试这个

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

来源

2016-09-01 11:34:39 Bipon

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

来源

2016-10-07 08:19:55

100vh不适用于Safari浏览器吗？

回答

相关问题