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

html教程评论483 views阅读模式

好久没有做过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

企鹅博客
  • 本文由 发表于 2019年9月5日 04:16:12
  • 转载请务必保留本文链接:https://www.qieseo.com/374930.html

发表评论