日期:2014-05-17  浏览次数:20706 次

在firefox里宽度自适应的问题
在firefox里宽度自适应的问题,分两列布局,左边隐藏时,右边100%显示,左边展开时,右边自适应宽度显示,代码如下,在ie6.0下正常,在firefox里就不行。
<div   id= "workplace_box ">
          <div   class= "workplace_box_nav "   id= "treeView ">
                  左列导航,通过js隐藏或显示。
          </div>
          <div   class= "workplace_box_image ">
                <div   class= "workplace_nav_show "   onclick= "show( 'treeView ', 'img ') "   id= "img ">
                </div>
          </div>
                <div   class= "workplace_box_main ">
                              右列内容
                </div>
  </div>

css

#workplace_box
{
        width:   100%;
}
.workplace_box_nav
{
        position:   relative;
        top:   0px;
        left:   0px;
        width:   200px;
        height:   auto;
        float:   left;
        display:   none;       /*通过js修改显示属性*/
}
.workplace_box_image       /*   显示/隐藏按钮图标位置*/
{
        position:   relative;
        top:   25px;
        left:   auto;
        width:   15px;
        height:   auto;
        float:   left;
        cursor:   pointer;
}
.workplace_box_main
{
        position:   relative;
        top:   0px;
        left:   auto;
        width:   auto;   /*   firefox   不能自适应宽度   */
        max-width:   98%;     /*在firefox下不设置这个属性,宽度无法正常显示,但设置了这个属性,左边展开的时候,宽度不能调整*/
        height:   auto;
        float:   right;
}

怎么修改css才能适应firefox呢,谢谢!


------解决方案--------------------
#workplace_box
{
width: 100%;
}
.workplace_box_nav
{
width: 200px;
height: auto;
*float: left;
display: none; /*通过js修改显示属性*/
}
.workplace_box_image /* 显示/隐藏按钮图标位置*/
{
width: 15px;
height: auto;
*float: left;
display: table-cell;
cursor: pointer;
}
.workplace_box_main
{
width: auto; /*firefox 不能自适应宽度 */
height: auto;
*float: right;
display: table-cell;
}