CSS在浏览器之间以不同的方式定位事物

Question

我在Adobe Animate中制作了一个交互式图形(以HTML5出版(，并试图通过添加HTML链接使其更容易访问它，以便使用Tab键而不是鼠标的人可以通过图形上的链接进行选项卡，因此jaws screenReader可以正确读取它。最终，我将通过将其不透明度设置为.01，使HTML链接几乎看不见(但是链接边界框将显示(，但是我当前将其设置为.51，以便我可以更好地看到定位。我在Mac上的Safari和Firefox之间获得了不同的结果，并且在Windows上看起来也不同。在Firefox和Chrome的Windows上，它们显示几乎相同，但是Mac上的Safari和它们都关闭了位置。Windows似乎将它们移到右侧和向下。父div的定位设置为相对，每个跨度标签也设置为相对。我不确定在这一点上该怎么做才能在跨浏览器之间始终如一地工作。如果您可以看我，这是链接。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%;

更新

其他使用percent而不是像素。

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