IE7 <li> 在div之外显示的子弹或数字

Question

I'm having issues with the IE7 list element bugs. The bullets (or numerals) of and are being shown outside of the margin. How do I fix this for IE? From what I've read this seems to be a problem when specifying the height/width in an IE7 li. Images can be found here:

Firefox:

IE7:

I have a stylesheet with the Meyer reset.

#create_request li {
    display: list-item;
    width: 313px;
    height: 23px;
    background-color: #E3E3E3;
    list-style: decimal;
    list-style-position: inside;
    padding-left: 25px;
    padding-top: 5px;
}

#create_request li.alternate {
    background-color: white;

}

#create_left li:hover {
    width: 356px;
    background: url('/images/list_add.png') 100% 100% no-repeat;
    background-color: #B0B0B0;
    cursor: pointer;
}

Answer 1

From what I've read this seems to be a problem when specifying the height/width in an IE7 li.

That's correct. Set the width on <ol> instead of the <li> and use line-height instead of height on the <li> .

#create_request ol {
    width: 313px;
}

#create_request li {
    line-height: 23px;
    ...
}

Answer 2

IE can do some weird things with padding/margin. I would recommend having a separate .css file for IE:

<!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

And then just add either padding-left or margin-left to bump it back in place.

Answer 3

1) try display: block; instead of display: list-item;

2) try using margin (even margin-left:0;)

3) CSS hack for IE7 is also available

*+html #create_request li{

     ..... some style corrections here will work for IE7  .....

}