Question

如果您在谷歌浏览器中打开以下网址，您将看到问题，首先加载它没关系，但如果您继续刷新顶部3个项目的宽度（Bedingungen，Preise和So geht's）崩溃。在Firefox中它没关系，但我不知道为什么它在chrome中做，任何人都明白为什么会发生或有解决方案？谢谢！

使用Ajax / json加载文本，它们是内联的，因为我希望它们是文本的宽度。我不想设置固定的宽度。

http://alexanderlloyd.info/test/

CODE

CSS:

#game-nav li a {
    background: none repeat scroll 0 0 rgb(255, 255, 255);
    border: 1px solid rgb(217, 195, 169);
    color: rgb(34, 34, 34);
    display: inline-block;
    padding: 8px 12px 8px 8px;
    text-decoration: none;
    text-transform: uppercase;
}

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

Answer 1

问题在于li.game-nav的float：left属性由于它动态更新，它可以正确调整尝试从列表中删除float：left并将其添加到其div容器

Chrome会使用动态内容折叠内联元素的宽度

1 个答案: