javascript - Inline-Block退出全屏后转为Block元素-Chrome

Question

我制作了一个带有内联 block 元素和一个按钮的网站，使其中一个元素全屏显示。在 google-chrome 中退出全屏后，内联 block 将以类似于普通 block 元素的两行显示。这个
我希望这个例子能澄清问题:

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 会分两行显示文本。而不是
"hello"
它以这种方式显示
"hel
lo"。

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

Answer 1

似乎是一个( Unresolved )时间问题..
它不能通过(重新)将两个框 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 中的任何东西:)