У меня есть страница с кнопкой с фоновым изображением (спрайт). Когда я не помещаю свой спрайт в таблицу, я получаю повторяющиеся изображения, разбросанные по диагонали по всему веб-браузеру, и без галереи. В представлении исходного кода HTML все выглядит хорошо, но если я иду к Инспектору, он выглядит по-другому, повторяя кнопки, которые я создал по диагонали справа налево, спускаясь вниз.
Обновление:
Я только что понял, что другим способом добиться этой работы было изменить:
<a href="../Gallery/Create" class="l_new" />
до
<a href="../Gallery/Create" class="l_new" ></a>
Это не сложно. Единственное, о чем я могу думать, - это, должно быть, какая-то ошибка в моей версии @renderbody, используемой с _layout.chtml (я использую версию, сгенерированную Visual Studio).
Похоже, это будет оставаться загадкой, но я оставлю свой вопрос на всякий случай.
Стиль l_new содержит информацию о спрайте:
.l_new
{
width: 170px;
height: 36px;
background-position: -43px -155px;
background-image: url('img/sprites.png?v=6');
background-repeat: no-repeat;
overflow: hidden;
display:block;
}
Я не смог найти ничего необычного в HTML, кроме того факта, что он находится в теге section, который я никогда раньше не использовал, и я не вижу работающих javascript-скриптов.
Если я вложу спрайт в таблицу, все будет нормально.
Вот как это выглядит с инспектором Chrome. Это делает то же самое в IE9. Я не опубликовал исходный код HTML, но, поверьте мне, это совершенно нормально и не отражает вывод ниже.
А вот пример файла index.chtml, который приводит к проблеме:
@model List<AutoShow_MVC.Models.GalleryModel>
@using AutoShow_MVC.Models
@{
ViewBag.Title = "Index";
}
<h2>Photo Gallery</h2>
<a href="../Gallery/Create" class="l_new" />