0

我已经调整了我的底部属性以在 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; }

我尝试过像素、em 和百分比。这些都不是一致的。我可以使用浏览器特定的设置吗？

这是一个演示链接供参考。

4

2 回答 2

0

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

于 2013-06-25T18:46:47.777 回答
0

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

于 2013-07-08T15:45:17.610 回答