如何修復工具提示寬度IE8

我在我的網頁上使用了this tooltip。它工作正常。但是，我注意到它在IE8瀏覽器中存在一個主要問題。在IE8中，工具提示無法獲得全寬。我已經檢查了IE8的原始插件鏈接，我可以看到它實際上是該工具提示的問題。如何修復工具提示寬度IE8

這是它是怎麼來的，在所有的瀏覽器：

，這是它是如何來在IE8：

我試着用css來解決它。但是，我失敗了！我不明白是什麼問題。我把代碼放在jsfiddle但是，我無法從jsfiddle的外部資源路徑加載他們的js文件。所以，如果有幫助，我已將js文件上傳到another link。我怎樣才能解決它在IE8的問題？

一些CSS：

div#mcTooltipWrapper {position:absolute;visibility:hidden;overflow:visible;z-index:9999999999;top:0px;} 
div#mcTooltip {float:left;border-style:solid;position:relative;overflow:hidden;}

來源

2014-06-20 user1896653

試着把它的最大寬度和高度 – imbondbaby

在哪個div，我應該給最大寬度？我把它給了div＃mcTooltip，但它沒有幫助。除此之外，max-width應該類似於js文件中設置的javascript max-width屬性。否則，它不適合 – user1896653

我不知道如何解決你使用的工具提示創建方法中的問題，但我想出另一種確實提供了一個完全可定製的工具提示的方法，也是在IE8 。它非常輕巧：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Demo Lightweight Tooltip CSS + JS</title> 
    <style> 
    html { 
     font-size: 62.5%; 
     } 
    body { 
     font: normal 1.3em Verdana; 
     padding-top: 2em; /* creates space for the first tooltip in this demo */ 
     } 
    span.tooltip { 
     position: relative; 
     display: inline-block; 
     border-bottom: 1px dashed black; 
     } 
    span.tooltip:hover { 
     cursor: help; 
     } 
    span.tip { 
     position: absolute; 
     bottom: 20px; 
     left: 0px; 
     display: block; 
     width: auto; 
     white-space: nowrap; 
     font-size: .9em; 
     border: 0px solid black; /* change as desired */ 
     border-radius: 6px; 
     padding: 1px 5px; 
     background: #eee; 
     background: linear-gradient(top, #eee, #ccc); 
     background: -moz-linear-gradient(top, #eee, #ccc); 
     background: -o-linear-gradient(top, #eee, #ccc); 
     background: -webkit-linear-gradient(top, #eee, #ccc); 
     background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); 
     background: -ms-linear-gradient(top, #eee, #ccc); 
     filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#eeeeee,EndColorStr=#cccccc); 
     zoom: 1; 
     visibility: hidden; 
     } 
    </style> 
</head> 
<body> 
    <p>The <span class="tooltip">WHO<span class="tip">World Health Organization</span></span> was established in 1948.</p> 
    <p> 
     It is part of the 
     <span class="tooltip">UN 
      <span class="tip">United Nations, <br>the successor of the <br>League of Nations</span> 
     </span>, 
     which was established in 1945. 
    </p> 
    <script> 
     var tooltips = document.querySelectorAll('.tooltip'); 
     for (var i=0; i<tooltips.length; i++) { 
      var tooltip = tooltips[i]; 
      if ('ontouchstart' in window || window.navigator.msPointerEnabled) { 
       tooltip.onclick = function() { 
        if (this.children[0].style.visibility == '' || this.children[0].style.visibility == 'hidden') 
         this.children[0].style.visibility = 'visible'; 
        else this.children[0].style.visibility = 'hidden'; 
       } 
      } 
      else { 
       tooltip.onmouseover = function() { 
        this.children[0].style.visibility = 'visible'; 
       } 
       tooltip.onmouseout = function() { 
        this.children[0].style.visibility = 'hidden'; 
       } 
      } 
     } 
    </script> 
</body> 
</html>

這裏是現場演示：http://codepen.io/anon/pen/Aidcb?editors=100。

一對夫婦的側事項：

IE不使邊界半徑不實際的邊界。
我這樣做是爲了在觸摸屏設備上點擊工具提示元素。我認爲這些用戶的大多數，即使不是全部，都是很直觀的。
我將提示的寬度設置爲auto，並通過提示內容中的br s調整實際寬度。你也可以設定一個固定的寬度。
如果您還想要「泡泡指針」，請參閱http://www.sitepoint.com/pure-css3-speech-bubbles/。

。
讓我知道你喜歡它，如果你願意。

來源

2014-06-23 22:37:19

我已經使用了另一個簡單的插件。仍然我接受你的答案。謝謝：） – user1896653

如何修復工具提示寬度IE8

回答

相關問題