IE7絕對位置在頂線開始，而不是其他瀏覽器

這是工作正是我所想要的，但問題是，在IE7絕對定位的範圍（hover-tooltip-container）從行的頂部開始，而不是像其他瀏覽器中那樣在底部開始。如果您向hover-tooltip-container添加邊框，您可以看到這一點。

這是一個問題，因爲我希望工具提示上去，但錨點仍然暴露。你應該可以將鼠標懸停在工具提示上，但是IE7的差距使得這種情況變得不可能。

如果有什麼辦法可以使hover-tooltip-container跨度在IE7，IE8和FFX上的同一位置開始，那就完美了。

JavaScript不是解決方案。

來源

2011-09-21 Explosion Pills

問題：您的100％寬度不考慮填充或邊框。例如，在Safari中，不管窗口有多寬，工具提示總是比窗口寬（帶水平滾動條）。 – Sparky

@ Sparky672謝謝。 100％寬度的容器應該位於另一個寬度較低的容器內，所以這不是問題。 –

我能夠不捨的「容器」元素浮到解決問題，有相對位置。這實現了容器突破的外觀，但仍爲工具提示提供了參考。

來源

2011-09-29 02:17:33

你可以用你已經有的代碼做的最簡單的事情就是添加一個明星黑客來調整.hover-tooltip中的bottom規則，對於IE7。

.hover-tooltip { 
    display: block; 
    padding: 15px; 
    position: absolute; 
    margin: 0 auto; 
    bottom: 1em; 
    *bottom: 0; 
    width: 100%; 
    border: 2px outset #c0c0c0; 
    background-color: #f0f0f0; 
    text-align: center; 
}

然而，.hover-tooltip-container和.hover-tooltip雙嵌套絕對位置似乎是不必要的。

來源

2011-09-21 21:00:45 Bart

+1良好的診斷和最佳的解決方案（在這種情況下）。 – davin

@Bart我想避免星星破解，但我們會看到。雙重嵌套的立場似乎並沒有在第一必要和可能造成的問題，但它們實際上是必要的，我做的，因爲錨可以在其他一些文字顯示內嵌的東西，但仍提示有一路延伸在頁面的左側並且相對於錨點向上。這需要另一個「不可見」元素包裝它以獲取從哪裏去的參考。 –

我做了一些完全不同的事情（也改名爲你的班級，很難與那些looooooooooong名字一起玩）。

http://jsfiddle.net/vZtBb/16/

我刪除了嵌套的絕對positionning：他們是一個導致了問題，因爲在絕對位置元素被斷章取義。所以，2個獨立的，嵌套的絕對定位元素意味着一個元素在什麼都沒有（不好意思，真的不想要）。

取而代之的是，我把你的工具提示框，在絕對的，而是使它比開始利用負位置（top:-70px）的錨較高。這有點粗略，但你應該明白我的觀點。

來源

2011-09-21 21:06:19 Kraz

試圖把這個.hover-DIV提示後：

<div class="clear fix"></div>

這個CSS：

.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} 

.clearfix {display: inline-block; } 

html[xmlns] .clearfix {display: block; }* html .clearfix {height: 1%; }

來源

2011-09-21 21:45:48 LightningWrist

IE7絕對位置在頂線開始，而不是其他瀏覽器

回答

相關問題