firefox和IE下，title元素无法换行的替换方式

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

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

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

for (String dtcID : rtEcPackage.getErrorCodeIDList()) {
                            
   sb.append(dtcID + " - ");
   // &#10也可以, 但不能用<br/>,否则页面输出有问题
   sb.append(DtcMessageConfigBoundle.getMessage(dtcID) + "&#13;");
}

前台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>：



后台使用&#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：