Html CSS工具提示在不同浏览器中的位置不同。我该怎么解释呢？

我已经调整了我的底部属性，以显示我希望它在Firefox中的显示方式，但在Chrome和Safari中，间距都被扭曲了。有没有办法为每个浏览器设置不同的“top”属性

HTML

CSS

/*悬停窗口*/
.工具提示{
颜色：#000000；轮廓：无；字体样式：粗体；
光标：帮助；文本装饰：无；
位置：相对位置；
}
.工具提示范围{
左边距：-999em；
位置：绝对位置；
}
.工具提示：悬停范围{
边框半径：30px 30px；-moz边框半径：30px；-webkit边框半径：30px；
长方体阴影：5px 5px 5px rgba（0,0,0,0.1）；-webkit长方体阴影：5px 5px rgba（0,0,0,0.1）；-moz长方体阴影：5px 5px rgba（0,0,0,0.1）；
字体系列：Arial、Tahoma、Helvetica、无衬线字体；
位置：自动；左侧：1米；顶部：2米；z索引：99；
左边距：0；宽度：700px；右边距顶部：-10px；
}
.工具提示：悬停img{
边框：0；边距：-30px 0 90px；
浮动：右侧；位置：固定；
z指数：99；
}
。工具提示：将em悬停{
字体系列：Arial，Tahoma，Helvetica，无衬线；字体大小：14px；字体大小：粗体；颜色：005DA4；
显示：块；填充：-0.2em 0.6em 0；
}
.classic{填充：0.8em 1em；}
*HTMLA:hover{background:transparent；}
.classic{背景：#ffffff；边框：1px实心#ffffff；}

我试过像素、em和百分比。这些都不是始终如一的。我是否可以使用特定于浏览器的设置

---

使用浏览器将有助于消除浏览器之间的差异

我将“.tooltip:hover span”中的top属性切换为“auto”，这似乎起作用了。

你看过qtip2了吗？link：我有过，但我对我的web应用程序中的JQUERY或Javascript不太熟悉，似乎有点不知所措。如果可能的话，我希望避免它。如果这是最好的方法的话，我想是时候浏览一下codecademy课程，熟悉一下，并找出答案了。谢谢你的提示！QTip2相当奇怪。只有当我将它设置为细分曲面并将鼠标悬停在父对象上时，它才能工作。当我将其设置为父对象并将其悬停在父对象上时，它显示为空。即使这样，它也不完全符合我的要求。我现在要坚持使用直接的CSS，但我以后会继续使用。很抱歉耽搁了，我正试图计算QTIP，但这给了我一些麻烦。我尝试了你链接首页上的所有版本和其他几个版本，但它们似乎对我的问题没有影响。我已经读到，自己定制它们是一种最佳实践，但我不确定如何做到这一点。我将“.tooltip:hover span”中的top属性切换为“auto”，这似乎起到了作用。我有另一个本质上相同的代码，它使用“bottom”而不是“top”，而这个修复程序不适用于它。不过，我想这是另一个问题。谢谢你的帮助。

    <a class="tooltip" href="#"> <!-- this tag activates my tool tip -->
<div class="handsevent" >    <!-- this div contains everything that activates the tool tip when hovered over-->
    <div class="handswrapper">    
        <div class="handshour" >
            <h3>8:00am-noon</h3>
        </div>
        <div class="handsspeaker">
            <h3>Speaker 3</h3>
        </div>
    </div>
    <div class="handstitle">
         <p>Description</p>
    </div>
</div>
    <span class="classic">   <!-- this span contains everything that pops up in the tool tip -->
        <h3>Title Bar</h3>
        <br />lots of descriptive text
    </span>
</a>

/* HOVER WINDOW */
.tooltip {
color: #000000; outline: none; font-style:bold;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}

.tooltip:hover span {
border-radius: 30px 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; 
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Arial, Tahoma, Helvetica, sans-serif; 
position: auto; left: 1em; top: 2em; z-index: 99; <!-- the 'top' attribute on this line is where I have been adjusting the display position it affects the position differently in different browsers -->
margin-left: 0; width: 700px; margin-top:-10px;
}
.tooltip:hover img {
border: 0; margin: -30px 0 0 90px;
float: right; position:fixed; 
z-index: 99;
}
.tooltip:hover em {
font-family: Arial, Tahoma, Helvetica, sans-serif; font-size:14px; font-weight: bold; color:005DA4;
display: block; padding: -0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
* html a:hover { background: transparent; }
.classic {background: #ffffff; border: 1px solid #ffffff; }