jquery - Chrome/Safari は、コンテンツが読み込まれる前にインライン要素の幅を設定します

Question

Chrome と Safari は、コンテンツが読み込まれる前に次の要素の幅を設定しているように見えるため、実際には幅がありません。しかし、Firefox では、読み込んだテキストの幅に幅を正しく設定します。背景が動的コンテンツの幅に設定されるように、インラインで幅がない必要があります。解決策はありますか？

<a class="text></a>

CSS:

.text { background: none 繰り返しスクロール 0 0 rgb(255, 255, 255); 境界線: 1px ソリッド RGB(217, 195, 169); 色: RGB(34, 34, 34); 表示: インラインブロック; パディング: 8px 12px 8px 8px; テキスト装飾: なし; テキスト変換: 大文字; }

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();
    });