Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法

今天又回顾了一下这个插件，然后发现它在IE6下面工作的时候，显示起来是不正常的，tip经常出现在很离谱的位置。问题还有，由于tip的显示效果没有用到任何图像，都是纯的CSS，所以里面用CSS实现的三角形在IE6下是无法工作的，会显示一块有色区域，很丑，所以我就想动手改它一下。先上一张对比图好了：


js方面的代码肯定是没问题的，问题出CSS上，Colortip用的是position进行定位，在IE6下面可能存在着一点问题。而且由于IE6不支持border-color:transparent的属性，所以tip下面的三角形也有问题。下面修正它吧。
打开插件的colortip-1.0-jquery.css这个文件，在里面找到如下代码：


代码如下:

.pointyTip,.pointyTipShadow{
/* Setting a thick transparent border on a 0x0 div to create a triangle */
border:6px solid transparent;
_border:6px solid #123456; /*指定一个特别的颜色值，为使用chroma滤镜作准备*/
bottom:-12px;
height:0;
left:50%;
margin-left:-6px;
position:absolute;
width:0;
font-size:0; /*IE下空标签会有一个高度，把font-size设为0可以清除这个高度*/
_filter:chroma(color=#123456); /*为IE6使用chroma滤镜将颜色#123456过滤成透明的*/
}

如果大家自行看一下代码的话，可能会发现我贴出来的代码和原来相比有点不同，但是我已经把注释写在里面了，应该可以理解吧。 下面继续：


代码如下:

.pointyTipShadow{
/* The shadow tip is 1px larger, so it acts as a border to the tip */
border-width:7px;
bottom:-14px;
_bottom:-15px; /*将小三角形的位置微调一下更准确*/
margin-left:-7px;
}
.colorTipContainer{
position:relative;
text-decoration:none !important;
_zoom:1; /*不知道为什么，这里加上zoom:1后IE6下使用left:50%才能得到正确的位置，难道内联的元素没有layout？无法准确表达……*/
}

好了，到这里就修正完毕了，在我的机器上，用IEtester和VMware虚拟机的XP+IE6都测试通过，你也可以试试效果。有任何问题可以向我反馈，我能改则改。代码好理解，不能理解的直接用插件就行了。

插件网站 | 原版DEMO | 改后DEMO | 修正后的插件下载

再补充一句，原版和改后的DEMO在高级浏览器里面的效果是一样的，没区别，但是用IE6试试就知道了。希望我做的这一点点微不足道的工作，为喜欢这款插件的朋友们带来方便，^_^
关于纯CSS的方法实现三角形的效果，可以参看Mr.Think的这篇文章，很详细很不错的技巧CSS技巧之圆角背景与三角形。

赞 (0)

相关推荐

  • 编写自己的jQuery提示框（Tip）插件

    编写自己的jQuery提示框（Tip）插件

    对jQuery相信很多同学和我一样平时都是拿来主义,没办法,要怪只能怪jQuery太火了,各种插件基本能满足平时的要求.但是这毕竟不是长久之道,古人云:"授之以鱼,不如授之以渔". 为了方便之前没有接触的同学,先来回顾一下jQuery的插件机制吧. 复制代码 代码如下: //添加check和uncheck插件 jQuery.fn.extend({   check: function() {     return this.each(function() { this.checked =

  • jQuery消息提示框插件Tipso

    jQuery消息提示框插件Tipso

    今天我们用Tipso插件来演示八种不同提示效果,并且了解下Tipso API. <div class="dowebok"> <h2>1.默认</h2> <div class="inner"> <span id="tip1" data-tipso="dowebok.com">Tipso</span> </div> </div> 演示一

  • jquery插件珍藏(图片局部放大/信息提示框)

    jquery插件珍藏(图片局部放大/信息提示框)

    1.图片局部放大 jQZoom Evolution (演示 | 下载) 2.信息提示框

  • jQuery带箭头提示框tooltips插件集锦

    jQuery带箭头提示框tooltips插件集锦

    摘要: 之前给大家介绍过用CSS来实现带箭头的提示框,今天我们来点不太一样的,本文将分享几款带箭头提示框. qtip qTip是一种先进的提示插件,基于jQuery框架.以用户友好,而且功能丰富,qTip为您提供不一般的功能,如圆角和语音气泡提示,并且最重要的是免费.支持ie6+以及其他主流浏览器 grumble.js grumble.js提供了特殊的提示,北/东/南/西定位的一般限制.可以围绕一个给定的元素以任意角度旋转,任何距离可以被指定,任何CSS样式可以应用.自动尺寸调整为本地化的文本使

  • 属于你的jQuery提示框（Tip）插件

    属于你的jQuery提示框（Tip）插件

    插件可以满足常用的提示显示,支持12个方向,支持边框.背景色.文本颜色自定义,支持位置微调.层级微调.宽度间距等参数调整. 先看看效果: tips:提示信息组件 参数: msg:'asdf',内容 dire:2,方向 w:250,宽度 _x:0,横向偏移 _y:0,纵向偏移 zIndex:100000,层级 borderColor:#FFF,边框颜色 bgColor:#FFF,背景颜色 useHover:true是否使用悬浮显示 color:默认提示文字颜色 padding:边距 javascr

  • jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】

    jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】

    本文实例讲述了jQuery悬停文字提示框插件jquery.tooltipster.js用法.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html页面: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery Tooltips悬停文字提示框效果</title> <meta charset="utf-8" /> <lin

  • jquery插件制作 提示框插件实现代码

    我们首先来介绍自定义选择器的开发,他的代码结构如下: 复制代码 代码如下: (function ($) { $.expr[':'].customselector = function (object,index,properties,list) { //code }; })(jQuery); 调用时候的写法: $(a:customselector) 现在我们先解释下函数中所使用到的各个参数. object:当前dom元素的引用,而不是jquery对象.需要强调的一点,dom元素和jquery对象

  • 基于jQuery Tipso插件实现消息提示框特效

    基于jQuery Tipso插件实现消息提示框特效

    基于jQuery Tipso插件实现消息提示框的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件,分享给大家供大家参考,具体内容如下 在线演示 源码下载 实现的代码: <div class="dowebok"> <h2> 1.默认</h2> <div class="inner"> <span id="tip1" data-tipso

  • jquery SweetAlert插件实现响应式提示框

    jquery弹出层插件,支持消息提示.错误提示.确认框提示等.交互体验度非常好,大家都用微信支付.支付宝等完成用户体验度非常的不错.本插件至少要支持IE9+.使用方式也非常的简单.粗暴,很符合大众的jquery插件使用方法. 先给大家演示效果: 在线预览    源码下载 代码如下: <h1>Sweet Alert</h1> <h2>A beautiful replacement for JavaScript's "Alert"</h2>

  • Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法

    Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法

    今天又回顾了一下这个插件,然后发现它在IE6下面工作的时候,显示起来是不正常的,tip经常出现在很离谱的位置.问题还有,由于tip的显示效果没有用到任何图像,都是纯的CSS,所以里面用CSS实现的三角形在IE6下是无法工作的,会显示一块有色区域,很丑,所以我就想动手改它一下.先上一张对比图好了: js方面的代码肯定是没问题的,问题出CSS上,Colortip用的是position进行定位,在IE6下面可能存在着一点问题.而且由于IE6不支持border-color:transparent的属性,

  • 基于jQuery下拉选择框插件支持单选多选功能代码

    基于jQuery下拉选择框插件支持单选多选功能代码

    由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui. 下面给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 多选:呈现列表 具体代码如下所示: /** *下拉框插件-chooseList *调用插件的方式以及格式: * 1.首先你需要创建一个div面板,给div定义ID * 2.在你所需要的地方调用插件: * 参数说明: * $("#divID").chooseList({ * qu

  • jQuery实现信息提示框(带有圆角框与动画)效果

    jQuery实现信息提示框(带有圆角框与动画)效果

    本文实例讲述了jQuery实现信息提示框效果.分享给大家供大家参考.具体如下: 一个jquery提示框特效,黑色风可,且提示框是圆角形状,点击页面中间的几个文字,提示框信息就会动态显示,CSS和JS部分代码比较多. 先来看看运行效果如下: 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&

  • 基于jQuery的弹出框插件

    html如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e

  • 基于JQuery 的消息提示框效果代码

    基于JQuery 的消息提示框效果代码

    详细内容请下载附件 附件下载 先看一下效果: 内容都集合到一个1.58KB的js文件里 复制代码 代码如下: var returnurl = ''; var messagebox_timer; $.fn.messagebox = function (message, url, type, delay) { clearTimeout(messagebox_timer); $("#msgprint").remove(); var m_body = $(this); delay = (typ

  • 基于jQuery的消息提示插件之旅 DivAlert(三)

    本版本遵循了2.0的写法,此处通过extend方法封装了需要设置的各个选项,比起2.0版本的代码要精简了一些. 2.0版本 复制代码 代码如下: //设置插件基本信息 var options = o || {}; options.width = o.width || 300; //提示框宽度若小于104px则自动重置为200px if (options.height > 104) { options.height = o.height; } else { options.height = 200

  • jQuery提示框插件SweetAlert用法分析

    本文实例讲述了jQuery提示框插件SweetAlert用法.分享给大家供大家参考,具体如下: SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框, 它将提示框进行了美化,并且允许自定义, 支持设置提示框标题.提示类型.内容展示图片.确认取消按钮文本.点击后回调函数等. 准备工作 首先我们必须将SweetAlert插件的js文件和css文件引入到页面中. <script src="sweetalert.min.js">&l

  • 基于jQuery的消息提示插件 DivAlert之旅（二）

    基于jQuery的消息提示插件 DivAlert之旅（二）

    改进的代码部分主要如下: 1.创建default.css文件: 代码 复制代码 代码如下: img { vertical-align:middle; } .jBg { position: absolute; top: 0; left: 0; z-index: 9999; background-color: #999; filter: alpha(opacity=70); opacity: 0.7; } .jWrap { position: absolute; border: 1px solid

随机推荐