Internet Explorer OL problem with decimals over 9
In my website, I've got an ol
with decimals (list-style-type:decimal
). In Internet Explorer, when the list gets over 9 the decibel starts at 0 again.
This is how it should be displayed, and how it's displayed in Firefox:
CSS of the list:
ol {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
ol li {
list-style-position:outside;
list-style-type:decimal;
margin:5px 0 5px 23px;
}
edit: And my css reset file adds this (this comes from firebug):
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 开发者_如何学编程0;
border:0 none;
font-size:100%;
margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
padding:0;
vertical-align:baseline;
}
Who knows how to fix this?
The numbers are cut off by the margin. Increase it, and you'll see the tens-place digits.
ol li {
margin-left: 2.5em;
}
or you can modify it as
padding-left : 30px
It's because of the margin:0;
in your css reset file.
A specific answer for users in the future who have this problem: the left margin has to be at least 30px to display double digits in IE.
精彩评论