ホームページ > ウェブフロントエンド > htmlチュートリアル > IE6_html/css_WEB-ITnose の Css+Div に関するいくつかの小さな問題の概要

IE6_html/css_WEB-ITnose の Css+Div に関するいくつかの小さな問題の概要

WBOY
リリース: 2016-06-24 12:32:45
オリジナル
1089 人が閲覧しました

  好久没有做过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 では、これら 3 つの DIV は 1 行で表示できず、2 行で表示されます。 IE6では、右側にフロートすることができます。 300px;

背景色: 緑;

浮動小数点: 右; div



ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート