HTML5网页设计

html_css

IE6 IE7: div中table宽度100%导致的宽度问题

时间:2012-10-01 17:18来自:网络作者:未知点击:
问题现象:定义了DOCTYPE的页面 当表格的内容比div的高度还要高时,div会出现滚动条,同时在IE6和IE7下会出现问题:

问题现象:定义了DOCTYPE的页面

当表格的内容比div的高度还要高时,div会出现滚动条,同时在IE6和IE7下会出现问题:

IE6:此时table的100%宽度还是没有滚动条那是的宽度,出现滚动条后,div的可视宽度减少,导致横向滚动条也出现了,而且横向能滚动的长度正好是滚动条的宽度。

IE7:竖滚动条此时则很操蛋的消失了.....

IE8:下一切正常。

解决方法:内嵌套一个分区元素 Layout

  1. <div style="width:100px; height=50px; overflow:auto;"> 
  2.     <div style="*zoom:1;"><!--添加此行--> 
  3.         <table width="100%" border="1" cellspacing="0" cellpadding="0"> 
  4.              .... 
  5.         </table> 
  6.     </div> 
  7. </div> 

补充:

1.不止是TABLE,如果DIV宽高有像TABLE的定义,也会出现这种现象

2.DIv两列布局,一个DIV浮动,且两个DIV中同有宽度100%TABLE/DIV时, IE6会强制未浮动DIV中的内容空浮动DIV中内容的高度

当前文章地址:http://www.shejicool.com/web/html_css/350.html

阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐