Я довольно опытный в CSS, но сейчас я сталкиваюсь с очень странной проблемой рендеринга в Google Chrome 9. Я пытаюсь создать несколько необычно выглядящих кнопок ссылок (в основном якоря с большим количеством стилей).Вот несколько примеров разметки:
<a href="" class="button">
<figure class="sprite icon icon_back"></figure>
Link button with icon</a>
Эта разметка может показаться вам несколько странной, есть несколько вещей, которые вы должны знать:
- Я использую класс рисунков HTML5 для включениязначок как часть кнопки.У меня есть правильный сброс CSS, и Chrome может точно отобразить этот тег.
- Вместо того, чтобы фактически указывать на изображение, я применяю CSS-классы к элементу figure.В CSS я использую технику спрайтов, чтобы показать правильную часть одного большого изображения спрайта.
Все это прекрасно работает в Firefox, а также в Chrome.Правильный рендеринг можно увидеть на следующем изображении:
Так выглядит и в Firefox, и в Chrome.Здесь возникает проблема, если я помещаю такую кнопку в теги абзаца> <p></p>, это происходит только в Chrome:
Обратите внимание, как кнопка разрывается на части?Только в Chrome и только при размещении внутри абзаца.Это становится еще более странным: это происходит только для первой кнопки внутри абзаца, если бы я поместил три кнопки внутри абзаца, только 1-я облажалась.
Ваш первый вопрос, вероятно, будет касаться CSS.Это довольно многословно, поэтому временная ссылка на данную страницу:
Редактировать: ссылка на действующую страницу удалена, была только временной для проверки проблемы.