先贴代码：

1

<

ul

id

="newsList"

>

2

　　

<

li

><

span

class

="txt"

><

a

href

="#"

>

新闻标题

</

a

></

span

><

span

class

="date"

>

[2009-10-29]

</

span

></

li

>

3

　　

<

li

><

span

class

="txt"

><

a

href

="#"

>

新闻标题

</

a

></

span

><

span

class

="date"

>

[2009-10-29]

</

span

></

li

>

4

　　

<

li

><

span

class

="txt"

><

a

href

="#"

>

新闻标题

</

a

></

span

><

span

class

="date"

>

[2009-10-29]

</

span

></

li

>

5

　　

<

li

><

span

class

="txt"

><

a

href

="#"

>

新闻标题

</

a

></

span

><

span

class

="date"

>

[2009-10-29]

</

span

></

li

>

6

</

ul

>

7

<

style

type

="text/css"

>

8

*

{

margin

:

0

;

padding

:

0

;

}

9

#newsList

{

width

:

400px

;

border

:

1px solid #333

;

font-size

:

14px

;

margin

:

20px auto

;

}

10

#newsList li

{

background

:

gray

;

line-height

:

25px

;

overflow

:

hidden

;

color

:

#fff

;

width

:

100%

;

list-style

:

none

;

}

11

#newsList li .txt

{

float

:

left

;

width

:

300px

;

}

12

#newsList li .txt a

{

color

:

#fff

;

}

13

#newsList li .date

{

float

:

right

;

}

14

</

style

>

在firefox、Chrome、Safari、Opera等W3C浏览器中没有任何问题，但是在IE系列版本（不包括IE8）中，都会产生一个3px的bug，详见下图：

目前笔者所知道的解决方法有两种：

1. 给li添加float属性，属性值可以是除none外的任意值
2. 给li添加vertical-align属性，属性值可以是任意值

从解决问题的实质上，这两种方法并无区别，都是通过添加相应的css属性来激发li的haslayout，但是方法2更适合来解决这个问题，因为一旦给 li添加浮动，那么势必要清除之，这是个棘手的问题，虽然有很多方法可以来解决浮动带来的麻烦，但是无形中增加了代码的负重，那是我们不想看到的，所以推荐使用方法2。