overflow:visible; 在FF里面不起作有了？FF是如何理解overflow:visible的
日期：2014-05-17 浏览次数：20619 次
overflow:visible; 在FF里面不起作有了？FF是怎么理解overflow:visible的？
我设备了overflow:visible,在IE里面，长度会自动增长，但FF不会，
见下面的代码，在IE和FF里面 main层的长度就不一样，
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " "http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=GB18030 ">
<title> Insert title here </title>
<style type= "text/css ">
#main{border:1px solid black;width:800px; height:200px; overflow:visible;}
#a{border:1px solid red;width:200px; height:300px;float:left;}
#b{border:1px solid blue;width:300px; height:400px;}
</style>
</head>
<body>
<div id= "main ">
<div id= "a "> </div>
a
<div id= "b "> </div>
</div>
</body>
</html>
------解决方案--------------------
你把高度设死了，这样写不太规范！不只是FF不行，IE7也会出问题的！
我的解决方法也只是
#main{
border:1px solid black;
width:800px;
height:expression(this.scrollHeight <=200:200px?this.scrollHeight+ 'px ')
overflow:visible;
}
------解决方案--------------------
归根结底还是你写的CSS不太规范,IE6可以自动增加，但是IE7还是不可以，因为IE7要不IE6规范
------解决方案--------------------
像ls說的一樣，因為你把高度設置死啦，如果你要設置高度，又要自增長的話，可以試試下面的樣式
#main{
border:1px solid black;
width:800px;
min-height:200px;
height:auto!important;
height:200px;
}
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " "http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=GB18030 ">
<title> Insert title here </title>
<style type= "text/css ">
#main{border:1px solid black;width:800px;overflow:visible; height:1%}
#a{border:1px solid red;width:200px; height:300px;float:left;}
#b{border:1px solid blue;width:300px; height:400px;}
</style>
</head>
<body>
<div id= "main ">
<div id= "a "> </div>
a
<div id= "b "> </div>
</div>
</body>
</html>
这样就可以了，浮动闭合的问题，还有增加一个hack去掉浮动效果也可以
我设备了overflow:visible,在IE里面，长度会自动增长，但FF不会，
见下面的代码，在IE和FF里面 main层的长度就不一样，
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " "http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=GB18030 ">
<title> Insert title here </title>
<style type= "text/css ">
#main{border:1px solid black;width:800px; height:200px; overflow:visible;}
#a{border:1px solid red;width:200px; height:300px;float:left;}
#b{border:1px solid blue;width:300px; height:400px;}
</style>
</head>
<body>
<div id= "main ">
<div id= "a "> </div>
a
<div id= "b "> </div>
</div>
</body>
</html>
------解决方案--------------------
你把高度设死了，这样写不太规范！不只是FF不行，IE7也会出问题的！
我的解决方法也只是
#main{
border:1px solid black;
width:800px;
height:expression(this.scrollHeight <=200:200px?this.scrollHeight+ 'px ')
overflow:visible;
}
------解决方案--------------------
归根结底还是你写的CSS不太规范,IE6可以自动增加，但是IE7还是不可以，因为IE7要不IE6规范
------解决方案--------------------
像ls說的一樣，因為你把高度設置死啦，如果你要設置高度，又要自增長的話，可以試試下面的樣式
#main{
border:1px solid black;
width:800px;
min-height:200px;
height:auto!important;
height:200px;
}
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " "http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=GB18030 ">
<title> Insert title here </title>
<style type= "text/css ">
#main{border:1px solid black;width:800px;overflow:visible; height:1%}
#a{border:1px solid red;width:200px; height:300px;float:left;}
#b{border:1px solid blue;width:300px; height:400px;}
</style>
</head>
<body>
<div id= "main ">
<div id= "a "> </div>
a
<div id= "b "> </div>
</div>
</body>
</html>
这样就可以了，浮动闭合的问题，还有增加一个hack去掉浮动效果也可以
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
