ecshop模板css兼容性问题

it2022-05-06  0

不只是在模板修改中会碰到此类问题,在任何的DIV+CSS页面制作中都会碰到。

日前本站长在帮朋友制作ECSHOP模板的时候就遇到了这个兼容性问题。

我在最外层的DIV设置了一个 heiht:auto ,里面还有两级 div ,在IE下很正常,最外层的大DIV会随着内部的DIV的高度而变化,但是在火狐下就无效。 

Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。

<div style=" border:2px solid #0CC; width:600px;" >

   <div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>

    <div style=" width:50px; height:40px; border:#099 1px solid; margin-left:5px; float:left;display:inline "></div>

 

   <div style=" width:50px; height:40px; border:#099 1px solid;float:right "></div>

    <!-- <div style="clear:both"></div>-->

</div>

 

解决方法如下:

1、

   <div style=" border:2px solid #0CC; width:600px;" >

       <div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>

      <div style=" width:50px; height:40px; border:#099 1px solid; margin-left:5px; float:left;display:inline "></div>

     <div style=" width:50px; height:40px; border:#099 1px solid;float:right "></div>

     <div style="clear:both"></div>    

  </div>

在float:left的Div之后 加入<div style="clear:both"></div>  这样加入的弊端是,JS DOM找节点时会出现了一个多余的节点,这个也是个没用的DIv

 

2.直接在最大层加入 overflow:hidden; 这也是我用的解决手法!!

 

   <div style=" border:2px solid #0CC; width:600px;overflow:hidden; " >

      <div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>

     <div style=" width:50px; height:40px; border:#099 1px solid; margin-left:5px; float:left;display:inline "></div>

 

     <div style=" width:50px; height:40px; border:#099 1px solid;float:right "></div>

    </div>

 

3.加入一个伪类!

 

   <div style=" border:2px solid #0CC; width:600px;" class="clearfix" >

      <div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>

      <div style=" width:50px; height:40px; border:#099 1px solid; margin-left:5px; float:left;display:inline "></div>

 

     <div style=" width:50px; height:40px; border:#099 1px solid;float:right "></div>

  </div>

 

Css如下:

    <style>

         .clearfix:after{context:"."; height:"0"; display:block;clear:both;visibility:hidden}

 

         /* Hides from IE-mac \*/

         * html .clearfix {height: 1%;}

        /* End hide from IE-mac */

 

   </style>

至于这种方法,IE5.5下 对此类并不支持!

转载于:https://www.cnblogs.com/wangblognet/archive/2012/12/09/2809959.html

相关资源:数据结构—成绩单生成器

最新回复(0)