Почему на моих веб-страницах появляются небольшие пробелы? - PullRequest
Новая
       13

Почему на моих веб-страницах появляются небольшие пробелы?

6 голосов
/ 25 сентября 2008

Это может быть глупый вопрос, но если есть лучший или правильный способ сделать это, я бы с удовольствием его изучил.

Я сталкивался с этим несколько раз, в том числе в последнее время, когда в отрендеренной версии моей HTML-страницы появляются небольшие пробелы. Интуитивно я думаю, что они не должны быть там, потому что вне текста или объектов форматирование HTML страницы не должно иметь значения, но, очевидно, это имеет значение.

Я имею в виду следующее: у меня есть некоторый файл Photoshop от клиента о том, как они хотят, чтобы их сайт выглядел. Они хотят, чтобы он выглядел практически идеально для изображения в этом файле.

В одном из мест на странице требуется строка меню, где каждое из них выполняет бит изменения при наведении курсора, действует как гиперссылка и т. Д. В файле Photoshop это одна длинная панель, поэтому дешевый и простой способ сделать это просто разделить этот сегмент на несколько изображений, а затем поместить их рядом друг с другом в файле.

Так что инстинктивно я выкладываю это так (есть еще кое-что, но это суть) 

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

и т. Д.

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

Один из способов правильной визуализации - удалить возврат каретки между изображениями 

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

Что заставляет изображения идти прямо друг против друга (желаемый эффект), но делает строку невероятно длинной и код сложнее поддерживать (он переносится сюда в SO, и это упрощенная версия - реальная версия длиннее имена файлов и JavaScript были добавлены для выполнения зависания).

Мне кажется, что этого не должно происходить, но похоже, что возврат каретки в HTML отображается как небольшое пустое пространство. И это происходит во всех браузерах, похоже.

Прав ли я или нет, полагая, что два приведенных выше фрагмента должны отображаться одинаково? И я что-то не так делаю? Может быть, сохранение файла с неправильной кодировкой? Должен ли я сделать каждую из этих ссылок идеально позиционированным элементом CSS вместо этого?

Ответы [ 7 ]

14 голосов
/ 25 сентября 2008

Пробел (включая возврат каретки) обычно отображается как пробел во всех браузерах.

Вам нужно размещать элементы один за другим, но вы можете использовать хитрость: 

<a href="page1.html"><img src="image1.png" 
/></a><a href="page2.html"><img src="image2.png" 
/></a><a href="page3.html"><img src="image3.png" 
/></a>

Это также выглядит немного некрасиво, но все же лучше, чем одна строка. Вы можете изменить форматирование, но идея состоит в том, чтобы добавить возврат каретки внутри элементов, а не между ними.

7 голосов
/ 25 сентября 2008

Я не знаю, достаточно ли это общего для вашей страницы, но вы можете классифицировать эти конкретные теги a и поместить их все влево, тогда они будут объединяться независимо от того, как отформатирован ваш HTML , 

<style>
    a.together {
        float:left;
    }
</style>

<a class='together' href="page1.html"><img src="image1.png" /></a>
<a class='together' href="page2.html"><img src="image2.png" /></a>
<a class='together' href="page3.html"><img src="image3.png" /></a>
2 голосов
/ 25 сентября 2008

Я справляюсь с этим, используя неупорядоченный список и создавая каждое изображение / ссылку на элемент. Затем используйте CSS, чтобы отобразить каждый элемент и поместите их влево.

Это даст вам больше гибкости и сделает разметку очень удобочитаемой.

2 голосов
/ 25 сентября 2008

Поведение, которое вы продемонстрировали выше, верно, поскольку браузер обрабатывает возврат каретки как пробел. Чтобы исправить это, вы можете оформить его так: 

a { display: block; float: left; }

Обратите внимание, что вышеприведенное правило применяет его ко всем ссылкам, поэтому вы можете захотеть сузить селектор только до определенных элементов, например: 

#nav a { display: block; float: left; }
2 голосов
/ 25 сентября 2008

Причина проста: в HTML пробел имеет значение, но только один раз. Повторяющиеся пробелы игнорируются, отображается только первое.

Единственный надежный способ избежать этого, как вы и сделали, не оставляя пробелов между элементами.

Когда макет на основе таблицы будет меньше, чем в настоящее время, вы можете использовать таблицу с нулевой границей и нулевой подкладкой для выравнивания ваших элементов, располагая их на отдельных строках в исходном коде.

2 голосов
/ 25 сентября 2008

Это часть спецификации HTML - пробелы находятся в разметке, поэтому они считаются частью документа.

Единственные другие варианты, которые у вас есть, так как вам не нравится форматирование, - это разрыв HTML-тегов: 

  <a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a

, что на мой взгляд нежелательно, или динамически создавайте html - либо с помощью JavaScript, либо с помощью системы шаблонов и динамического html.

1 голос
/ 25 сентября 2008

Если вы собираетесь создать интерфейс с вкладками на веб-сайте, сделайте все возможное, чтобы сделать это правильно, и это того стоит Есть много сайтов с отличными примерами реализации вкладок CSS. Попробуйте использовать один из них.

В этом имеется множество вкладок CSS + Javascript / AJAX. Или посмотрите этот набор простых примеров CSS (некоторые стилизованы). Наконец, проверьте этот действительно-очень крутой генератор вкладок .

...