Вертикальное выравнивание колонок CSS в Chrome - PullRequest
Новая
       2

Вертикальное выравнивание колонок CSS в Chrome

1 голос
/ 29 февраля 2012

Со следующим кодом: 

<!DOCTYPE html>

<html>
<body>
    <div style="-webkit-column-width:5em;-moz-column-width:5em;">
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </div>
</body>
</html>

В Chrome я получаю странное выравнивание строк:

Chrome Alignment Issue

Строки выровнены правильно в Firefox. Кто-нибудь знает как это исправить?

Ответы [ 2 ]

2 голосов
/ 01 марта 2012

Похоже, проблема связана с таблицей стилей пользовательского агента, используемой Webkit.

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

Вот ваш пример с таблицей стилей сброса CSS: http://jsfiddle.net/euw72/

0 голосов
/ 29 февраля 2012

Я прошел через вашу проблему и нашел решение, почему вы получаете проблему в chrome.

Пожалуйста, добавьте этот css в тег ul: 

<ul style="margin:0;">
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>

Я надеюсь, что это будетрешить вашу проблему.

enter image description here

ОТКРЫТЬ СКРИНШОТ В НОВОМ ОКНЕ ДЛЯ ЯРКОСТИ

Выше снимок экрана различных изображений Google Chrome (окна разных размеров), вы можете видеть, что 1-е изображение - это ваш скриншот и вывод вашего кода в Google Chrome, в котором я добавил три разноцветных рамки для демонстрации проблемы.

  1. Красная граница на div.
  2. Розовый на ул
  3. Зеленый на ли

После добавления margin:0; на ul вы можете увидеть различные выходные данные в разных размерах области просмотра.

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

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

...