IE7 <li> bullet or number shown outside of div

问题

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;
}

回答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;
    ...
}

回答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.

回答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  .....

}

来源：https://stackoverflow.com/questions/6076730/ie7-li-bullet-or-number-shown-outside-of-div