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

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

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

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

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

css webkit gecko
person gregseth    schedule 21.11.2011    source источник
comment
У меня сейчас нет браузера webkit, чтобы протестировать его, но пробовали ли вы добавить vertical-align: bottom; к своим изображениям? edit: display: table-cell отлично подходит для блоков одинаковой высоты :) Хотя он будет растягиваться, если блоки слишком велики (ошибаюсь, я думаю. На всякий случай следует протестировать с минимальной шириной), когда встроенный блок будет вести себя как встроенный элементы и создайте вторую строку.   -  person FelipeAls    schedule 23.11.2011

Ответы (1)


arrow_upward
0
arrow_downward

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

<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; (или воспользуетесь техникой clearfix), проблема должна быть решена.

person joshnh    schedule 22.11.2011
comment
Э-э-э, даже если это семантически лучше, это не решает проблему: попробуйте добавить дополнение к figcaption. - person gregseth; 23.11.2011