Css Safari固定/绝对相对于右下角

这是我的包装器和h3的CSS

#introWrap {
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    overflow: hidden;
}

#introWrap h3 {
    height: 200px;
    width: 800px;
    position: absolute;
    top: calc(100% - 200px);
    left: calc(100% - 800px);
}

在Chrome/Firefox上，

h3

显示在正确的位置（右下角）。在Safari上，由于某种原因，他不理解CSS和默认设置为左上角（0-0）

我尝试了固定/绝对位置的每种组合，我尝试使用

vh

和

vw

而不是%。似乎无法强制Safari正确定位

h3

你可以看到它的作用（h3是“简介”中较大的文本，你会注意到它出现在除Safari之外的所有浏览器的右下角）

编辑：以下是对其中一条评论的回应：

<section id="introWrap">
    <div class="main">
        <h1>Title</h1>
        <h2>Subtitle</h2>
    </div>
    <h3>Title</h3>
    <h4>Title</h4>
</section>

标题
字幕
标题
标题

不过，我认为这与问题并不完全相关。H1H2和h4不是相对于100%文档高度/宽度定位的，因此它们看起来很好。在Safari中，将h3定位在右下角并不起作用。

在我看来

top: calc(100% - 200px);
left: calc(100% - 800px);

与

bottom:0;
right:0;

---

所以--在Safari 5、W7 64位+Chrome等中进行了测试，

请给我们一些HTML代码来处理。@BuddhistBeast上传了一些！希望有帮助，请告诉我如果你需要任何其他信息，这个问题让我发疯。我一辈子都不明白为什么它不能在Safari上工作。此外，还有一个指向该页面的链接，可能有助于从视觉上看到问题所在！Safari此时似乎不支持

calc

。我发现如果将

h3

元素的底部边距调零，则

bottom:0

会起作用。应该这样做，但Safari/Webkit中似乎有一个bug，

calc

无法正确处理视口单位，我认为这可能与这里发生的事情有关，因为如果视口单元工作不正常，webkit可能无法确定视口高度。