zoukankan      html  css  js  c++  java
  • Css+Div在IE6上一些细小问题总结

      好久没有做过Web开发了,最近做些css+div的页面设计工作还真有些不顺手,特别是有些东西在IE8上运行很正常,而在IE7和IE6上就离谱了。这里就一些ie6下不同之处做一下记录吧。

      1、Div做线条的问题

           在设计页面时有时候想用一个Div来模拟一条直线(某些情况是可以用Border和Padding等来实现的),给Div设置宽和高,并设置背景色或背景图,如:

    #bottomLine
    {
        background-color: Red;
        800px;
        height: 3px;
    }

    在IE8下确实显示的是一条高为3像素的红色横线,但在IE6下这条红线的高度远远超过3像素,好像有一个字体的高度。为了解决这个问题,加上overflow属性即可:

    #bottomLine
    {
        background-color: Red;
        800px;
        height: 3px;
        overflow:hidden;
    }

    2、多个div浮动在同一行

          有时候想在同一行显示多个DIV,可以先让右边的DIV靠右浮动,而最左边的那个DIV不浮动,在IE8下下面代码没问题:
          .divWrapper
          {
               800px;
               height:300px;
          }

          .divLeft
         {
             100px;
             height:300px;
             background-color:green;
         }

         .divRight
         {
             100px;
             height:300px;
             background-color:green;
             float: right;
         }
         .divCenter
         {
             600px;
             height:300px;
             background-color:Red;
             float:right;
         }

         <div class=”divWrapper”>
                   <div class=”divRight”>right div</div>
                   <div class=”divCenter”>center div</div>
                   <div class=”divLeft”>left div</div>
         </div>

         但在IE6下,这三个DIV在一行是显示不下的,会换成两行显示。在IE6下可以将所有DIV都左浮动或右浮动,改为如下则没有问题:

          .divWrapper
          {
               800px;
               height:300px;
          }

          .divLeft
         {
             100px;
             height:300px;
             background-color:green;
             float: right;
         }

         .divRight
         {
             100px;
             height:300px;
             background-color:green;
             float: right;
         }
         .divCenter
         {
             600px;
             height:300px;
             background-color:Red;
             float:right;
         }

         <div class=”divWrapper”>
                   <div class=”divLeft”>left div</div>
                   <div class=”divCenter”>center div</div>
                  <div class=”divRight”>right div</div>
         </div>

  • 相关阅读:
    Java设计模式菜鸟系列(四)工厂方法模式建模与实现
    决策树分类
    SVD神秘值分解
    省市区三级联动菜单(附数据库)
    POJ 3076 Sudoku (dancing links)
    HDOJ 4862 Jump
    BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 站点设置
    Transparency Tutorial with C#
    【剑指offer】不用加减乘除做加法
    POJ2112_Optimal Milking(网洛流最大流Dinic+最短路Flody+二分)
  • 原文地址:https://www.cnblogs.com/qguohog/p/1592349.html
Copyright © 2011-2022 走看看