您好,欢迎访问一九零五行业门户网

Css+Div在IE6上一些细小问题总结_html/css_WEB-ITnose

好久没有做过web开发了,最近做些css+div的页面设计工作还真有些不顺手,特别是有些东西在ie8上运行很正常,而在ie7和ie6上就离谱了。这里就一些ie6下不同之处做一下记录吧。
  1、div做线条的问题
       在设计页面时有时候想用一个div来模拟一条直线(某些情况是可以用border和padding等来实现的),给div设置宽和高,并设置背景色或背景图,如:
#bottomline
{
    background-color: red;
    width:800px;
    height: 3px;
}
在ie8下确实显示的是一条高为3像素的红色横线,但在ie6下这条红线的高度远远超过3像素,好像有一个字体的高度。为了解决这个问题,加上overflow属性即可:
#bottomline
{
    background-color: red;
    width:800px;
    height: 3px;
    overflow:hidden;
}
2、多个div浮动在同一行
      有时候想在同一行显示多个div,可以先让右边的div靠右浮动,而最左边的那个div不浮动,在ie8下下面代码没问题:
      .divwrapper
      {
           width:800px;
           height:300px;
      }
      .divleft
     {
         width:100px;
         height:300px;
         background-color:green;
     }
     .divright
     {
         width:100px;
         height:300px;
         background-color:green;
         float: right;
     }
     .divcenter
     {
         width:600px;
         height:300px;
         background-color:red;
         float:right;
     }
right div
center div
left div
但在ie6下,这三个div在一行是显示不下的,会换成两行显示。在ie6下可以将所有div都左浮动或右浮动,改为如下则没有问题:
      .divwrapper
      {
           width:800px;
           height:300px;
      }
      .divleft
     {
         width:100px;
         height:300px;
         background-color:green;
         float: right;
     }
     .divright
     {
         width:100px;
         height:300px;
         background-color:green;
         float: right;
     }
     .divcenter
     {
         width:600px;
         height:300px;
         background-color:red;
         float:right;
     }
left div
center div
right div
其它类似信息

推荐信息