标签: safari7

我有一个非常简单的情况,我想在其中设置一个容器元素80vh,然后将内部div设置为该高度的100%.在Chrome上,这将正确呈现,但在Safari上,内部元素没有100%的80vh高度.

.container {
    background-color: red;
    width: 100%;
    height: 80vh;
}

.inner {
    height: 100%;
    background-color: blue;
}

这是一个显示这个问题的小提琴:http://jsfiddle.net/neilff/24hZQ/

在Chrome上,元素为蓝色,在Safari中为红色.如果没有应用div 80vh的高度,是否有解决此问题的方法.inner？

当我滚动而不是移动时,我有一个位于屏幕底部的固定位置div.但是,在Safari上,这个div的行为就像绝对定位一样,并且与其他内容一起上下移动.当我单击"检查元素"时,编程的(所需)位置会突出显示,而不是视觉(实际？)位置.

我无法在小提琴中重现这个问题.这不会发生在Chrome,FF或IE(10+)中.

这是视觉(字符计数框)和编程位置(突出显示区域)之间差异的屏幕截图.

在这些上面还有更多css和html的实际层,但这是直接的代码:

HTML简化了

<article class="parent">
  <article class="inner-wrapper">
    <div id="counter">
      Character Count: <span class="tally">*javascript calculation*</span>
    </div>
  </article>
</article>

SCSS

article.parent {
  max-width: rem(640);
  margin: 0 auto rem(30) auto;
  padding: 0 rem(10);

 #counter {
   position: fixed;
   border: #888 solid 1px;
   bottom: 130px;
   left: 10px;
   border-radius: 5px;
   padding: 10px;
   background: rgba(255, 255, 255, .8);
   font-size: .8em;
   min-width: 150px;
 }

}

如何使这个div在Safari中运行,以便视觉位于编程位置的顶部？