Текстовые маркеры в списках
При изменении межстрочного интервала (CSS-свойство line-height) потребуется исправить строки 24 и 36.
Как это выглядит в браузере
- — Обычное тире для сравнения.
-
Параграф. И он не переносится на другую строчку,
как в предыдущем варианте.
Еще один параграф с отступами.
- Вложенный нумерованный список:
- Ну и ненумерованный:
- А вот и знак ® в теге
<sup>
.
Он увеличивает высоту строки, и из-за этого наше тире сбивается в некоторых браузерах.
- Но исправить это довольно
просто®.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
<style type="text/css">
.example p
, .example ul
, .example ol
{
padding: 0;
margin: 1em 0;
}
.example li
{
margin: 0.5em 0 0.5em 1.3em;
}
.example ul
{
list-style-type: none;
//list-style-image: url('li.gif');
}
.example ul li
{
padding: 0;
behavior: expression(
( !this.before && parentNode && parentNode.tagName == 'UL' )
?
( this.before = true )
& ( parentNode.style.listStyleImage = 'none' )
& (
( this.firstChild && this.firstChild.firstChild )
?
( this.firstChild.style.marginTop = '-1.2em' )
& ( this.firstChild.style.position = 'relative' )
: ''
)
& ( eNOBR = document.createElement( '<nobr style="position: relative; display: block; width: 1.25em; left: -1.25em; margin: 0 -1.25em -1.2em 0;" />' ) )
& ( eNOBR.innerHTML = '— ' )
& ( this.insertBefore( eNOBR, this.firstChild ) )
: ''
);
}
.example ul>li:before
{
content: '\2014\a0';
float: left;
margin-left: -1.25em;
}
.example ul>li>*:first-child:-moz-first-node
{
margin-top: -1.2em;
}
.example ul>li>*
{
text-indent: 0;
}
.example .sup
{
position: relative;
top: -0.5em;
font-size: 0.75em; //font-size: 0.89em;
line-height: 0;
vertical-align: baseline;
}
</style>
<div class="example">
<ul>
<li>— Обычное тире для сравнения.</li>
<li>
<p>Параграф. И он не переносится на другую строчку,
как в <a href="../css_content_in_ie/">предыдущем варианте</a>.</p>
<p>Еще один параграф с отступами.</p>
</li>
<li>Вложенный нумерованный список:
<ol>
<li>Ну и ненумерованный:
<ul>
<li>А вот и знак — <sup>®</sup> в теге <code><sup></code>.
Он увеличивает высоту строки, <nobr>и из-за</nobr> этого наше тире сбивается в некоторых браузерах.</li>
<li>Но исправить это — довольно
просто<sup class="sup">®</sup>.</li>
</ul>
</li>
</ol>
</li>
</ul>
</div>
|