css如何解决不同浏览器下文本兼容的问题(2)-木庄网络博客

当前第2页返回上一页

<div class="test-justify">
    测试文本
</div>

var $this = $(".test-justify")
, justifyText = $this.text().trim()
, afterText = "";
for (var i = 0; i < justifyText.length; i++) {
    afterText += justifyText[i] + " ";
}
afterText = afterText.trim() + "<span></span>";
$this.html(afterText).css({ "height": $this.height() / 2 + "px" });

好了，这种方案应该能支持主流的浏览器了，但缺点是由于通过js再调整的，所以刷新的时候仔细看会看到文本两端对齐的过程（闪一下），体验并不是很好，那就做一下兼容吧。

只有 IE 和 Safari 不支持 text-align-last: justify 所以只考虑这两种浏览器的情况下调用最后一种方案

function myBrowser() {
    var userAgent = navigator.userAgent;
  
    //判断浏览器版本  
    var isOpera = userAgent.indexOf("Opera") > -1; 
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; 
    var isEdge = userAgent.toLowerCase().indexOf("edge") > -1 && !isIE; 
    var isIE11 = (userAgent.toLowerCase().indexOf("trident") > -1 && userAgent.indexOf("rv") > -1);
  
    if (/[Ff]irefox(\/\d+\.\d+)/.test(userAgent)) {
        return "Firefox";
    } else if (isIE) {
        return "IE";
    } else if (isEdge) {
        return "IE";
    } else if (isIE11) {
        return "IE";
    } else if (/[Cc]hrome\/\d+/.test(userAgent)) {
        return "Chrome";
    } else if (/[Vv]ersion\/\d+\.\d+\.\d+(\.\d)* *[Ss]afari/.test(userAgent)) {
        return "Safari"
    } else {
        return "unknown"
    }
}
  
var browser = myBrowser();
if (browser == "IE" || browser == "Safari") {
    var $this = $(".test-justify")
        , justifyText = $this.text().trim()
        , afterText = "";
    for (var i = 0; i < justifyText.length; i++) {
        afterText += justifyText[i] + " ";
    }
    afterText = afterText.trim() + "<span></span>";
    $this.html(afterText).css({ "height": $this.height() / 2 + "px" })
}