Блог

У меня есть следующий код для генерации некоторых интервалов с использованием помощника cakephp

 <div id="numberRow">
    <?php echo $this->Paginator->numbers(array('class' => 'numbers', 'separator' => '', 'before' => '', 'after' => '', 'first' => 1, 'last' => 1)); ?>
</div>
  

Это генерирует следующий код:

 <div id="numberRow">
    <span class="current">1</span><span><a href="/posts/show/barter/page:2" class="numbers">2</a></span>
</div>
  

Проблема в том, что браузер отображает пробел после <span> , который мне не нужен.

Мое решение на данный момент состоит в том, чтобы написать cake следующим образом:

 <div id="numberRow">
            <span class="current">1</span><span><a href="/posts/show/barter/page:2" class="numbers">2</a></span></div>
  

с закрывающим тегом в той же строке, что и <span> но это нарушает формат и затрудняет чтение исходного кода.

Есть ли способ лучше?

Хорошие новости! Существует стиль CSS, который нацелен на решение именно этой проблемы. Это называется white-space-collapse , и в вашей таблице стилей это выглядит следующим образом:

 #numberRow {white-space-collapse: discard;}
  

В браузерах, которые поддерживают это, это приведет к удалению пробелов между тегами внутри <div> , если вокруг них нет других символов.

Теперь о плохих новостях … пока не существует ни одного браузера, который это поддерживает. 🙁

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

В то же время, это распространенная проблема, от которой страдают многие разработчики сайтов.

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

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

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

Еще более запутанное решение, но, несомненно, умный взлом, заключается в том, чтобы установить font-size:0; для родительского элемента (в вашем случае <div> ), а затем установить font-size обратно правильный размер для элементов содержимого. например:

 #numberRow {font-size:0;}
#numberRow>span {font-size:12px;}
  

(заменяя ’12px’ любым размером, который вы, конечно, хотите, чтобы они были)

Недостатками этого являются: во-первых, это ужасный взлом; во-вторых, это ужасный взлом; и в-третьих, это может затруднить контроль размера вашего шрифта, если вы используете форматирование на основе em, а не шрифты фиксированного размера в пикселях. Но это работает.

В целом, моя рекомендация — пойти с простым ответом и удалить пробелы в вашем PHP-коде. По крайней мере, до тех пор, пока в браузерах большинства пользователей не будет установлено надлежащее CSS-решение.

Надеюсь, это поможет.

Не могли бы вы просто сделать это?

 <div id="numberRow"><?php echo $this->Paginator->numbers(array('class' => 'numbers', 'separator' => '', 'before' => '', 'after' => '', 'first' => 1, 'last' => 1)); ?></div>