退出全屏-Chrome瀏覽器后，Inline-Block變為Block元素

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

退出全屏顯示后，谷歌瀏覽器會以兩行顯示文字。 代替
“你好”
它以這種方式顯示
“HEL
LO”。

我想使用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中不會破壞任何內容：）