[英]Inline-Block turns to Block element after exiting Fullscreen -Chrome
我已经制作了一个包含内联块元素和一个按钮的网站,以使其中一个元素全屏显示。 在使用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错误? 有解决这个问题的方法吗?
似乎是一个(尚未解决的)计时问题。
无法通过(重新)将两个框的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中不会破坏任何内容:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.