今天写代码,需要在页面上提示消息,为了省事,没有使用第三方的tip插件,想直接用html元素的title来显示。
结果悲剧了,发现实现不了,该死的浏览前兼容问题又来了,IE下可以通过转义字符搞定,倒是火狐下死活不行, W3C规范,不惧强制效力啊~ 汗一把...唉,无奈只好用了替代方法:
原来程序:
后台封装数据程序:
for (String dtcID : rtEcPackage.getErrorCodeIDList()) {
sb.append(dtcID + " - ");
// 
也可以, 但不能用<br/>,否则页面输出有问题
sb.append(DtcMessageConfigBoundle.getMessage(dtcID) + " ");
}
前台js显示输出:
html += "<div id='" + key + "' class='carImg' title='" + value.dtcMsg + "'>
+ "A:<img src='" + $.webPathresources/images/demo/car1.jpg' class='carIcon'
/>" + key+ "</div>";
});
// 后台不能用<br/>,否则生成的代码有问题,IE和火狐下都自动加了结束符</div>
<div title="P3045 - Undefined DTC<br></div>" class="carImg" id="SZ00">
A:<img class="carIcon" src="http://127.0.0.1:8080/ams/resources/images/demo/car1.jpg">SZ00
</div>
// 实际应该是这样
<div title="P3045 - Undefined DTC<br/>" class="carImg" id="SZ00">
A:<img class="carIcon" src="http://127.0.0.1:8080/ams/resources/images/demo/car1.jpg">SZ00
</div>
后台使用<BR/>的提示效果,多了了</div>:
后台使用
或"
的提示效果--FF:
后台使用
或"
的提示效果--IE:
替换方案,即加入CSS控制换行,同时不使用div的title,改用其他元素,如span元素来充当title
后台封装数据程序:
for (String dtcID : rtEcPackage.getErrorCodeIDList()) {
sb.append(dtcID + " - ");
// 可以使用BR
sb.append(DtcMessageConfigBoundle.getMessage(dtcID) + "<br/>");
}
前台样式br:
/** title换行的替代方案,支持FF和IE*/
div.br span {
display: none;
border: 1px solid #000;
text-decoration: none;
background-color:#D1E9E9;
position: absolute;
padding: 3px;
left: 60px;
/** 最顶层显示 */
z-index: 99;
/** 半透明 */ /** IE **/
filter: alpha(opacity = 90);
/** 非IE **/
opacity: 0.9;
}
div.br:hover span {
display: block;
}
前台js显示输出:
html += "<div id='" + key + "' class='carImg br'>A:<img src='" + $.webPath
+ "resources/images/demo/car1.jpg' class='carIcon'/>" + key
+ "<span id='titleTip'>" + value.dtcMsg + "</span></div>";
// html += value;
// html += key;
});
替换方案的显示效果,IE和Firefox均ok:
- 大小: 6.8 KB
- 大小: 14.2 KB
- 大小: 9.5 KB
- 大小: 20.5 KB
分享到:
相关推荐
管他什么技术 做出来就行 白猫黑猫,抓住老鼠就是好猫
在Firefox下直接调用IE浏览器(IETab这个插件).zip
FireFox下文本域换行FireFox下文本域换行FireFox下文本域换行FireFox下文本域换行
CSS在firefox和ie下的兼容性问题,是最让网页设计师头痛的事。在IE下测试明明是正常的,到了火狐下就变样了。这样一来还得重新修改,最怕改好后在IE下又不兼容了。这里介绍一下css在火狐和ie下的兼容要点。
兼容firefox火狐、IE6IE7IE8加入收藏,设为首页代码
Firefox IE Tab 火狐浏览器及调试器
css 自动换行 强制换行属性,在实际应用中,如果不强制换行会导致页面变形很难看,所以用下面的方法,即可解决此类问题。
程序支持下述9种常见浏览器: 默认IE 360浏览器 腾讯TT 傲游 Avant Browser 世界之窗 GB绿色浏览器 MY IE 极速浏览器 另外还支持Firefox火狐浏览器URL的获取,效果极佳。 说明一点,这是delphi 7 开发的绿色软件。
程序稍微变动就支持 默认IE 360浏览器 腾讯TT 傲游 Avant Browser 世界之窗 GB绿色浏览器 MY IE 极速浏览器 ...另外还支持Firefox火狐浏览器URL的获取。 如果您还需要支持其它浏览器,请联系加我的QQ:25158172
IE+Firefox浏览器下搭建EBS的Form环境,实现IE,Firefox下Form同时工作
Firefox和IE兼容参考,这是前段时间为把公司的框架兼容Firefox而作的总结,供参考
IE和firefox 调试 javascript css html 插件 exe文件为IE的,另一个为firefox的 AJAX开发必备
解决IE6 IE7 Firefox中li兼容问题
Firefox, IE5, IE5.5, IE6, IE7, IE8多种浏览器兼容的问题,解决以上浏览器存在的兼容问题
IE的我就不说了, 我这个方法的是用JS实现的,但是使用时并不用写任何JS语句,也并非在CSS定义中执行语句,只是像CSS那样设置个属性就OK,效率也很高 不过这个方法并非我原创,是偶然看到一网友写的(来源不清楚了,因为我...
IE6.0、IE7.0 与FireFox CSS兼容的解决方法
JavaScript在IE和Firefox(火狐)的不兼容问题解决
CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8 CSS 浏览器兼容
js Firefox 加入收藏夹功能代码 兼容Firefox 和 IE.docx