Gecko vs. Webkit: заполнение внутри встроенных блоков - PullRequest
Новая
       3

Gecko vs. Webkit: заполнение внутри встроенных блоков

1 голос
/ 22 ноября 2011

Вот скрипка, показывающая мою проблему: http://jsfiddle.net/7QaXL/1/

В браузерах на основе webkit заполнение <p> s, кажется, подталкивает изображения вверх, а это не то, что я хочу.

Итак, мои вопросы:

  • Какое поведение (в соответствии со спецификациями)?
  • Как я могу получить шесть блоков одинаковой высоты, с внутренними элементами сотступы, не меняя их выравнивания?

1 Ответ

0 голосов
/ 22 ноября 2011

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

<ul>
    <li>
        <figure>
            <img src="http://wiki.urbandead.com/images/thumb/6/6a/Img_upld.gif/100px-Img_upld.gif" alt="">
            <figcaption>
                <h6>Title 1</h6>
                <p>Long description 1</p>
            </figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://wiki.urbandead.com/images/thumb/6/6a/Img_upld.gif/100px-Img_upld.gif" alt="">
            <figcaption>
                <h6>Title 2</h6>
                <p>Long description 2</p>
            </figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://wiki.urbandead.com/images/thumb/6/6a/Img_upld.gif/100px-Img_upld.gif" alt="">
            <figcaption>
                <h6>Title 3</h6>
                <p>Long description 3</p>
            </figcaption>
        </figure>
    </li>
</ul>

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

РЕДАКТИРОВАТЬ: После дальнейшего изучения проблемы, я обнаружил, что проблема, с которой вы сталкиваетесь (насколько ямогу сказать) это связано с display: inline-block; и его естественным поведением.Если вы замените это свойство на float: left; и дадите неупорядоченный список overflow: hidden; (или воспользуетесь методикой очистки), проблема должна быть решена.

...