Chrome / Safari在内容加载之前设置内联元素的宽度

Question

Chrome和Safari似乎在内容加载之前设置了以下元素的宽度，因此实际上它没有宽度。但是在Firefox中，它将宽度设置为正确加载文本的宽度。它需要内联且没有宽度，以便将背景设置为动态内容的宽度。任何解决方案？

<a class="text></a>

CSS：

.text {     background：none repeat scroll 0 0 rgb（255,255,255）;     边界：1px solid rgb（217,195,169）;     颜色：rgb（34,34,34）;     display：inline-block;     填充：8px 12px 8px 8px;     text-decoration：none;     text-transform：大写; }

JavaScript的：

    $(document).ready(function() {
    var data;
    function loadContent(){ 
        $.ajax({
            url: "json/content.json",
            data: "nocache=" + Math.random(),
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            success: function(source){
                data = source;
                showInfo();
            },
            error: function(data){
                alert("Failed to load content");
            }
        }); 

    }

    loadContent();
        function showInfo(){
            $(".text").html(data[lang]['startpage']['text']);
    }
   showInfo();
    });