CSS Tooltip在不同的瀏覽器中有不同的位置。我如何解釋這一點？

我已經調整了我的底部屬性，以顯示我在Firefox中如何使用它，但是間距在Chrome和Safari中都會變形。有沒有辦法爲每個瀏覽器設置不同的「頂級」屬性？CSS Tooltip在不同的瀏覽器中有不同的位置。我如何解釋這一點？

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和百分比。這些都沒有一致。我可以使用瀏覽器特定的設置嗎？

here is a demo link for reference.

來源

2013-06-25 ExperimentsWithCode

你看過qtip2嗎？鏈接：http://craigsworks.com/projects/qtip2/ – stackErr

我有，但我不熟悉我的Web應用程序中的JQUERY或Javascript，它似乎有點超過我的頭。如果可能，我希望避免它。不過，如果這是最好的方法，那麼我認爲是時候通過代碼學課程來熟悉一下，並弄清楚。謝謝你的提示！ – ExperimentsWithCode

QTip2很奇怪。只有當我將它設置爲一個細分並將其懸停在父項上時，我才能使用它。當我將它設置爲父級並將父級懸停時，它顯示爲空白。即使如此，它也不能滿足我的要求。現在我要堅持使用直接的CSS，但我將來會回到它。 – ExperimentsWithCode

我將「.tooltip：hover span」中的頂部屬性切換爲「auto」，這似乎正在工作。

來源

2013-07-08 15:45:17 ExperimentsWithCode

使用CSS Reset將有助於消除瀏覽器之間的差異。

來源

2013-06-25 18:46:47 brentonstrine

對不起，我正在嘗試制定Qtips，但它給我帶來了一些麻煩。我嘗試了鏈接首頁和其他幾個版本的所有版本，但它們似乎對我的問題沒有影響。我讀過這是自己定製它們的最佳做法，但我不確定如何做到這一點。我將「.tooltip：hover span」中的頂部屬性切換爲「auto」，似乎正在工作。我有另一個基本相同的代碼，使用'底部'而不是'頂部'，這種修復不適用。我想這是另一個問題。謝謝你的幫助。 – ExperimentsWithCode

CSS Tooltip在不同的瀏覽器中有不同的位置。我如何解釋這一點？

回答

相關問題