Обеспечение того, чтобы изображения в списке никогда не обрезались слева - PullRequest
Новая
       0

Обеспечение того, чтобы изображения в списке никогда не обрезались слева

0 голосов
/ 05 февраля 2011

Я хочу убедиться, что изображения моего списка (то есть символы маркера для неупорядоченных списков и цифры / буквы / и т. Д. Для упорядоченных списков) никогда не обрезаются слева независимо от размера используемого шрифта. Это кажется проблемой для браузеров на основе WebKit, и я не уверен в достойном обходном пути.

Например, следующий фрагмент HTML неправильно отображается с Chrome 8/9: 

<html>
  <body>
    <ol style="font-size: 48px;">
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ol>
  </body>
</html>

Тот же фрагмент HTML отображается правильно (т.е. он не обрезается слева) в Internet Explorer 8.

Я обнаружил два (нежелательных) обходных пути:

  1. Укажите list-style-position: inside; в списке. Это заставляет изображение списка отображаться вместе с содержимым, но при этом выглядит нестандартно / грязно, IMO.
  2. Укажите некоторый тип полей / отступов в списке. Это работает, но затем добавляет слишком много отступов к спискам с меньшим размером шрифта.

Вот скриншот, который показывает проблему в Chrome 9.0.597.98; обратите внимание, как числа обрезаются на левом поле:

Chrome 9 list image bug

Ответы [ 3 ]

2 голосов
/ 05 февраля 2011

Я вижу вашу проблему в Chrome 9 и последнем Safari на OSX.Вы можете попытаться указать поля в em s, чтобы увеличить их с помощью font-size, это даст мне приемлемые результаты: 

ol { margin-left: 0.5em; }
li { margin-left: 0; }

, но, конечно, YMMV.Лучше всего использовать класс <ol>, чтобы объединить font-size и margin-left, а затем настроить их вместе, чтобы получить разумные результаты в различных браузерах.

Это не такИдеальное решение, но получение результатов, идентичных пикселям во многих браузерах и в нескольких операционных системах, не только разочаровывает и зачастую невозможно, но и немного бессмысленно (ИМХО).

2 голосов
/ 05 февраля 2011 
<html>
<style>
#big {font-size:48px;}
#little {font-size:12px;}
ol { padding:0; margin:0; }
li  { margin:0 0 0 96px; padding:0 0 0 14px; }
</style>
  <body>
    <ol id="big">
      <li>one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one </li>
      <li>two</li>
      <li>three</li>
    </ol>
    <ol id="little">
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ol>
  </body>
</html>

enter image description here

0 голосов
/ 07 февраля 2011

Вы устанавливаете поля / отступы для своих списков?

Браузеры могут иметь разные стили по умолчанию для элементов UL и OL.

Часто полезно применять правила стиля «сброс» и / или указывать стили, которые вы хотите применить к общим элементам, таким как списки, абзацы, цитаты, таблицы, заголовки, ...

см. Здесь для основных сбросов CSS: http://meyerweb.com/eric/tools/css/reset/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...