Значок Themeroller не совпадает с ожидаемым - PullRequest
2 голосов
/ 01 февраля 2012

Я пытаюсь использовать иконку themeroller на странице, и она не совпадает с ожидаемой.Если я скажу:

    <html>
    <head>
    <title>Test Page</title>
    <link rel="stylesheet" type="text/css" media="screen" 
                          href="/css/ui-lightness/jquery-ui-1.8.17.custom.css" />
    </head>
    <body>
    <div><span class="ui-icon ui-icon-plusthick"></span>Hello World</div>
    </body>
    </html>

Я бы ожидал увидеть:

+Hello World

Но вместо этого я вижу только:

+

Почему это так?И как получить ожидаемый результат?

Спасибо.

Редактировать 1: я следовал приведенному ниже предложению, чтобы изменить диапазон на два тега (открыть и закрыть, как показано выше)), но это не имело никакого значения.

Соответствующий CSS выглядит следующим образом:

.ui-icon
{
    display: block;
    text-indent: -99999px;
    overflow-x: hidden;
    overflow-y: hidden;
    background-repeat: no-repeat;
}

.ui-icon
{
    width: 16px;
    height: 16px;
    background-image: url("images/ui-icons_222222_256x240.png");
}

.ui-icon-plusthick 
{
    background-position: -32px -128px;
}

Я попытался изменить отображение: block на inline-block и другие вещи, но этостановится хуже, если я это сделаю.

Редактировать 3: Неважно, я облажался код, это должно было быть:

 <span class="ui-icon ui-icon-plusthick" 
             style="display: inline-block"></span>Hello World</div>

И это прекрасно работает.(Я с ошибкой "дисплей")

Ответы [ 2 ]

2 голосов
/ 01 февраля 2012

промежутки не являются самозакрывающимися, должны иметь </span>, чтобы закрыть его

элемент span на MDN

использование:

<div><span class="ui-icon ui-icon-plusthick"></span>Hello World</div>

вместо:

<div><span class="ui-icon ui-icon-plusthick"/>Hello World</div>
0 голосов
/ 01 февраля 2012

Где вы закрыли пролет?

<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" media="screen" 
                      href="/css/ui-lightness/jquery-ui-1.8.17.custom.css" />
</head>
<body>
<div><span class="ui-icon ui-icon-plusthick">&nbsp;</span>Hello World</div>
</body>
</html>
...