Question

我制作了一个脚本，可以在页面加载和调整窗口大小时调整网页上的某些div元素的大小。问题在于，当我将窗口中的铬色变为全屏时（我不是指F11全屏模式，只是它从边缘到边缘），div的一小部分变得不可见。它不会发生在任何其他浏览器中。我正在运行最新版本的chrome。

出现此问题的div是#black_line_bottom，您可以在右下角看到#bottom_container div。

调整大小（js）的代码：

function calcHeight(factor){
if($(window).height() > 720){
    return $(window).height() * factor / 100;
}
else{
    return 720 * factor / 100;
}
}

function getEl(x){
return document.getElementById(x)
}

function resizeHeight(){
var height = calcHeight(3.5);
getEl("black_line_bottom").style.height = height + "px";
getEl("white_line_bottom").style.bottom = height + "px";
height = calcHeight(7.8);
getEl("bottom_container").style.height = height + "px";
getEl("white_line_bottom").style.height = (height - calcHeight(3.5)) + "px";
height = calcHeight(20.5);
};

$(window).on( "resize ready" , resizeHeight);

HTML：

<body>
    <div id = "bottom_container" >
        <div id = "black_line_bottom" class = "black_line">

        </div>
        <div id = "white_line_bottom"class = "white_line">

        </div>
    </div>
</body>

的CSS：

.black_line {
position : fixed;
background-color : #0a0a0a;
width : 100%;
height : 41px;
left : 0px;
right : 0px;
}

#black_line_bottom {
bottom : 0px;
}

#bottom_container {
position : fixed;
width : 100%;
height : 90px;
left : 0px;
right : 0px;
bottom : 0px;
}

.white_line {
position : absolute;
background-color : red;
width : 100%;
height : 100%;
left : 0px;
right : 0px;
}

#white_line_bottom {
bottom : 41px;
}

Answer 1

我做过一些研究，似乎是铬的一个错误。

链接到bug： http://code.google.com/p/chromium/issues/detail?id=151623

铬制作div元素的小方块在调整大小时看不见

1 个答案: