div在改变Safari浏览器和Chrome浏览器的高度时消失

问题描述：

使用Safari或Chrome浏览器访问此URL： http://aspspider.net/sunlight1000/two_col_div_layout_w3valid.htm 设置浏览器窗口的宽度以确保绿框的高度大于红框的高度框。然后抓住浏览器窗口的下边缘并将其拖动到绿框的下边缘并在其周围玩耍。当浏览器窗口的下边缘高于绿框的下边缘时，您会注意到红框消失。然后继续缩小浏览器窗口的高度，红框将再次出现。您会注意到红色框在浏览器窗口的下边缘到达红色框的下边缘时再次出现。红色框从不会在其他浏览器（IE，FF和Opera）中消失。这是Safari中的错误还是某种“功能”？无论如何，如果有人建议我采取一种解决方法以避免Safari中的红色框消失，我将非常感激。这里是上述页面的代码：div在改变Safari浏览器和Chrome浏览器的高度时消失

<!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>

答

我不知道这是否会为你的最终布局工作，但基于演示布局：似乎是负100％的保证金可能会造成问题。如果您删除浮动和保证金声明并在.left div上执行一个位置：绝对值，则行为似乎相同。只要容器相对定位，我想你会得到相同的最终结果。

我找到了解决方案。刚添加float：left;行到.wrapper类。请参阅http://aspspider.net/sunlight1000/two_col_div_layout_w3valid_0.htm上的示例 – Sergey 2010-11-06 10:14:08

div在改变Safari浏览器和Chrome浏览器的高度时消失

相关推荐