今天写代码,需要在页面上提示消息,为了省事,没有使用第三方的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: