firefox和IE下，title元素无法换行的替换方式
今天写代码，需要在页面上提示消息，为了省事，没有使用第三方的tip插件，想直接用html元素的title来显示。

结果悲剧了，发现实现不了，该死的浏览前兼容问题又来了，IE下可以通过转义字符搞定，倒是火狐下死活不行, W3C规范，不惧强制效力啊～ 汗一把...唉，无奈只好用了替代方法：

原来程序：
后台封装数据程序：

for (String dtcID : rtEcPackage.getErrorCodeIDList()) {                               sb.append(dtcID + " - ");   // &#10也可以, 但不能用<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>" id="SZ00">    A:<img src="http://127.0.0.1:8080/ams/resources/images/demo/car1.jpg">SZ00</div>// 实际应该是这样<div title="P3045 - Undefined DTC<br/>" id="SZ00">    A:<img src="http://127.0.0.1:8080/ams/resources/images/demo/car1.jpg">SZ00</div>

后台使用<BR/>的提示效果，多了了</div>：



后台使用&#13或"&#10的提示效果--FF：



后台使用&#13或"&#10的提示效果--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：