Question

我调整了我的底部属性，以便在Firefox中显示我想要的内容，但是Chrome和Safari中的间距都是扭曲的。有没有办法为每个浏览器设置不同的“顶部”属性？

HTML

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

CSS

/* 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; }

我尝试过像素，电子邮件和百分比。这些都不一致。我可以使用浏览器特定的设置吗？

here is a demo link for reference.

Answer 1

使用CSS Reset有助于消除浏览器之间的差异。

Answer 2

我将“.tooltip：hover span”中的top属性切换为“auto”，这似乎有效。

CSS Tooltip在不同的浏览器中有不同的位置。我怎么能解释这个？

2 个答案: