IE6-7, unobvious glitch
I stumbled upon an unusual (in any case not obvious) behavior of browsers IE versions 6 and 7, when specifying a property in styles that activates hasLayout for li elements of ol lists.
To clearly present the picture I will give an example:
In this case, in all browsers, including IE8, the list will be numbered from one to three. In IE6-7, the list will be numbered only ones.
Zoom is specified only as an option, instead you can also substitute height and width - the result will be the same.
')
Of course, there are very rare cases when it may be necessary to specify specific dimensions for li elements inside the ol list and at the same time wish that the numbering of the elements is present.The only thing that comes to mind is the use of nested counters on css with dimensions for li. (No, this is also not working in IE6-7).
UPD: the solution to this problem was suggested by tenshi . You need to specify the following properties in the styles for IE6-7
To clearly present the picture I will give an example:
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text / html; charset = utf-8" />
<title> Site title </ title>
<style type = "text / css">
ol {
list-style-type: decimal;
}
</ style>
<! - [if lte IE 7]>
<style type = "text / css">
li {
zoom: 1;
}
</ style>
<! [endif] ->
</ head>
<body>
<ol>
<li> 1 </ li>
<li> 2 </ li>
<li> 3 </ li>
</ ol>
</ body>
</ html>
In this case, in all browsers, including IE8, the list will be numbered from one to three. In IE6-7, the list will be numbered only ones.
Zoom is specified only as an option, instead you can also substitute height and width - the result will be the same.
')
Of course, there are very rare cases when it may be necessary to specify specific dimensions for li elements inside the ol list and at the same time wish that the numbering of the elements is present.
UPD: the solution to this problem was suggested by tenshi . You need to specify the following properties in the styles for IE6-7
ol li {
display: list-item;
vertical-align: top;
}
Source: https://habr.com/ru/post/62076/
All Articles