IE7 и блокировка отображения в строгом HTML

У меня возникают трудности с изображением, занимающим дополнительное место, хотя оно настроено на отображение: блок в css. Это происходит только в IE7. Проблема решается удалением всех пробелов между тегами в HTML-коде, но это не подходящее решение.

Я слышал о некоторых хаках IE7, таких как установка фиксированной ширины/высоты и следующий css:

display:inline-block;
zoom:1;
*display:inline;

Но это не сработало для меня (возможно, потому, что я использую XHTML strict).

Страница, над которой я работаю, выглядит следующим образом: http://www.morgana.nl/slaaptest/afspraak.html

Верхнее изображение — это изображение, установленное как display: block, за которым следует div с синим фоном.

Ссылка на изображение: http://www.morgana.nl/temp/ie7-display-block.png

Надеюсь на полезную помощь...


strict xhtml block internet-explorer-7
person Hans    schedule 14.03.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Поскольку вы используете XHTML, я предполагаю, что вы хотите, чтобы ваша разметка была семантической. Так что технически /siteimages/forms/bottom.jpg и /siteimages/forms/top.jpg не являются изображениями, имеющими какое-либо значение, по сравнению, скажем, с фотографиями людей. Так как это просто украшение, так почему бы не стилизовать их с помощью свойства CSS background и не применить к контейнерам <div> для достижения того же эффекта?

Eg.

.roundedTopBar {
    padding-top: 10px;
    background: transparent url('/siteimages/forms/top.jpg') 0 0 no-repeat;
}
.roundedBottomBar {
    padding-bottom: 10px;
    background: transparent url('/siteimages/forms/bottom.jpg') 0 100% no-repeat;
}

<div class="half2 roundedTopBar">
   <div class="roundedBottomBar">
      <div class="formsContainer">
        ...
      </div>
   </div>
</div>

Добавлено: Если вы хотите знать, как выполнить то, о чем изначально задавался ваш вопрос, решение состоит в том, чтобы не использовать display: inline-block, потому что IE 7 все испортит. Используйте float: left; clear: both; display: block; и убедитесь, что вы очистили свои поплавки в родительском контейнере.

Например. Это фрагмент с вашего веб-сайта, я добавил newCSS в пространство имен новые вещи, которые я добавил, вы можете использовать любые имена селекторов, которые вы считаете подходящими.

CSS:

.newCSS .clearFloat{
    overflow: hidden;
    width: auto;
}
.newCSS .inlineBlock {
    clear: both;
    display: block;
    float: left;
}

Разметка:

<div class="half2 clearFloat newCSS">
    <img src="http://www.morgana.nl/siteimages/forms/top.jpg" width="441"
    height="12" class="block inlineBlock" alt=""/>
    <div class="formsContainer block inlineBlock">
        <div class="formsInnerContainer" style="height:474px">
        form was here
        </div>
    </div>
    <img src="http://www.morgana.nl/siteimages/forms/bottom.jpg" class="block inlineBlock" alt=""/>
</div>

См. скрипку: http://jsfiddle.net/amyamy86/c34ny/

Если вы просматриваете в IE7 (ему не нравится jsFiddle): http://jsfiddle.net/amyamy86/c34ny/embedded/result/

person Amy    schedule 14.03.2013
comment
Вы очень правы. Лучше не использовать изображения переднего плана в дизайнерских целях, потому что они не имеют нетехнического значения. Если я прав, изображения, естественно, являются встроенными элементами, и именно поэтому display:block не соблюдается в IE7. Но когда мне нужно использовать изображение переднего плана, почему указанный выше обходной путь не работает в IE7? Я полагаю, это потому, что я использую строгий тип документа (еще не проверенный)... - person Hans; 15.03.2013
comment
Ты самый лучший. Спасибо за вашу помощь. Один сопутствующий вопрос. Я начал использовать изображения-разделители для целей макета, потому что при использовании div я получаю чрезвычайно большой файл css, потому что я не могу установить ширину и высоту div во встроенном css, будучи семантическим. У вас есть решение для этого? - person Hans; 16.03.2013
comment
@ Ганс, тебе не нужно использовать разделительные изображения. Почему бы не создать общие имена классов CSS, например: spacer_horizontal { div: block; padding-bottom: 10px; } и т. д.. Таким образом, вы сможете применять эти общие имена классов spacer ко всему, что захотите. - person Amy; 18.03.2013