CSS 浏览器之间的定位不同

Question

我有一个用 Adobe Animate 制作的交互式图形（发布为 HTML5），我试图通过添加 HTML link 使其更易于访问，以便使用的人Tab 键而不是鼠标可以通过图形上的 links 切换，因此 JAWS 屏幕阅读器可以正确阅读它。我最终会通过将 html link 的不透明度设置为 .01 来使它们几乎不可见（但 link 边界框会显示），但我目前将其设置为 .51 所以我可以更好地看到定位。我在 Mac 上的 Safari 和 Firefox 之间得到了不同的结果，在 Windows 上看起来也不同。在 Firefox 的 Windows 和 Chrome 上，它们的显示几乎相同，但在 Mac 上的 Safari 和两者之间的定位不一致。 Windows 似乎将它们更多地向右和向下移动。父 div 将定位设置为 relative，每个 span 标签也设置为 relative。我不确定此时该怎么做才能使它在浏览器中一致地工作。这是 link 如果你能帮我看看。 http://www.personal.psu.edu/pzb4/simba/ 任何帮助将不胜感激！

Answer 1

使用 position: absolute 作为链接。 “五月”示例：

    position: absolute;
    left: 220px;
    top: 226px;
    z-index: 2;
    text-decoration: none;
    font-family: helvetica;
    font-size: 21px;
    text-align: center;
    font-weight: bold;
    font-stretch: extra-condensed;
    line-height: 90%;

已更新

否则使用百分比而不是像素。

    position: absolute;
    left: 31%;
    top: 25%;
    z-index: 2;
    text-decoration: none;
    font-family: helvetica;
    font-size: 21px;
    text-align: center;
    font-weight: bold;
    font-stretch: extra-condensed;
    line-height: 90%;

CSS 浏览器之间的定位不同

CSS positioning things differently between browsers

css

css-position

已更新