我用过 this tooltip在我的网页上。它工作正常。但是，我注意到它在 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;}
最佳答案
我不知道如何在您使用的工具提示创建方法中解决您的问题，但我设计了另一种方法，它确实提供了一个完全可定制的工具提示，也在 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 不会在没有实际边框的情况下呈现 border-radius。
- 我这样做是为了在触摸屏设备上必须点击工具提示元素。我认为这是大多数(如果不是全部)用户会做的直观事情。
- 我将提示的宽度设置为
auto，并通过提示内容中的br调整实际宽度。您还可以设置固定宽度。 - 如果您还想要“气泡指针”，请参阅 http://www.sitepoint.com/pure-css3-speech-bubbles/ .
.
如果愿意，请告诉我您的喜好。
关于css - 如何在 IE8 下修复工具提示的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24331471/