Question

我创建了一个带有内联块元素和一个按钮的网站，以使其中一个元素全屏显示。在google-chrome退出全屏后，内联块将以与正常块元素类似的两行显示。这个我希望这个例子能够澄清这个问题：

HTML：

 <div id="test" style="display:inline-block">hel</div><div style="display:inline-block">lo</div>
 <br>
 <button onclick="launchFullscreen('test')">launchFullscreen</button>

JS：

      function launchFullscreen(id) {
            var element = document.getElementById(id);
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
        }

退出全屏后，google-chrome会以两行显示文字。而不是以＆＃34;你好＆＃34;它以这种方式显示了＆＃34; hel
lo＆＃34;。

我想使用inline-block属性。我犯了错误还是这是一个webkit错误？这个问题有解决方案吗？

Answer 1

似乎是一个（未解决的）时间问题。
无法通过（重新）将两个框display设置为inline-block来修复此问题。

但可以先将其设置为none或block，然后再设置为inline-block。
- 但不是马上，两个步骤都需要使用setTimeout来延迟：

$(document).on("webkitfullscreenchange mozfullscreenchange fullscreenchange",function()
    {
    if (document.fullScreen ||
        document.webkitIsFullScreen ||
        document.mozFullScreen || 
        document.msFullscreenElement || 
        document.fullscreenElement)
        {
        console.log("in fullScreen")
        }
    else
        {
        console.log("fullscreen nomore")
        setTimeout(function()
            {
            $("#box1,#box2").css("display","block")
            setTimeout(function()
                {
                $("#box1,#box2").css("display","inline-block")
                }, 0)
            }, 0)
        }
    })

它不漂亮，但它确实有效（对我来说）并且在Firefox中没有破坏任何东西：）

退出Fullscreen -Chrome后，Inline-Block变为Block元素

1 个答案: