更改 Safari 和 Chrome 浏览器高度时 div 消失
使用 Safari 或 Chrome 浏览器访问此 URL： http://aspspider.net/sunlight1000/two_col_div_layout_w3valid.htm 设置浏览器窗口的宽度以确保绿色框的高度大于红色框的高度。然后抓住浏览器窗口的下边缘并将其拖动到绿色框的下边缘并围绕它进行操作。您会注意到，当浏览器窗口的下边缘高于绿色框的下边缘时，红色框就会消失。然后继续缩小浏览器窗口的高度，红框又会出现。您会注意到，就在浏览器窗口的下边缘到达红色框的下边缘时，红色框再次出现。红框在其他浏览器（IE、FF 和 Opera）中永远不会消失。这是 Safari 中的错误还是某种“功能”？无论如何，如果有人建议我一种解决方法来避免 Safari 中的红框消失，我将不胜感激。 这是上述页面的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2 Column Fixed Liquid CSS Layout</title>
<style type='text/css'>
.wrapper
{
width: 100%;
min-width: 300px;
}
.wrapright
{
float: left;
width: 100%;
background-color: Blue;
}
.right
{
margin-left: 160px;
background-color: Lime;
}
.left
{
float: left;
width: 150px;
margin-left: -100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="wrapright">
<div class="right">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, SED DIAM NONUMMY NIBH
EUISMOD TINCIDUNT UT LAOREET DOLORE MAGNA ALIQUAM ERAT VOLUTPAT.
</div>
</div>
<div class="left">
<div style="background-color: red;">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, ...
</div>
</div>
</div>
</body>
</html>
Visit this URL using Safari or Chrome browser:
http://aspspider.net/sunlight1000/two_col_div_layout_w3valid.htm
Set the width of the browser’s window to make sure the height of the Green box is greater than the height of the Red box. Then grab the lower edge of the browser’s window and drag it to the lower edge of the Green box and play around it. You will notice the Red box disappears when the lower edge of the browser’s window goes higher than the lower edge of the Green box. Then continue to shrink up the height of the browser’s window and the Red box will appear again. You will notice the Red box appears again exactly at the moment the lower edge of the browser’s window reaches the low edge of Red box. The Red box never disappears in other browsers (IE, FF and Opera). Is this a bug in Safari or some kind of “feature”? In any case I will be highly appreciated if someone suggests me a workaround to avoid disappearing of the Red box in Safari.
Here is the code of above mentioned page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2 Column Fixed Liquid CSS Layout</title>
<style type='text/css'>
.wrapper
{
width: 100%;
min-width: 300px;
}
.wrapright
{
float: left;
width: 100%;
background-color: Blue;
}
.right
{
margin-left: 160px;
background-color: Lime;
}
.left
{
float: left;
width: 150px;
margin-left: -100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="wrapright">
<div class="right">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, SED DIAM NONUMMY NIBH
EUISMOD TINCIDUNT UT LAOREET DOLORE MAGNA ALIQUAM ERAT VOLUTPAT.
</div>
</div>
<div class="left">
<div style="background-color: red;">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, ...
</div>
</div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我不确定这是否适用于您的最终布局，但基于演示布局：似乎负 100% 边距可能会导致问题。如果您去掉浮动和边距声明并在 .left div 上执行position:absolute，则行为似乎是相同的。只要容器相对定位，我想你就会得到相同的最终结果。
I'm not sure if this would work for your final layout, but based on the demo layout: seems like the negative 100% margin could be causing the issue. The behavior appears to be the same if you take away the float and margin declarations and do a position: absolute on the .left div. As long as the container is relatively positioned, I think you'll get the same end result.