1

css で display:block に設定されているにもかかわらず、画像が余分なスペースを消費することに問題があります。これは IE7 でのみ発生します。HTML コード内のタグ間のすべてのスペースを削除すると問題は解決しますが、これは適切な解決策ではありません。

固定の幅/高さと次の css を設定するような IE7 のハックについて聞いたことがあります。

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

しかし、これはうまくいきませんでした (XHTML strict を使用しているためかもしれません)。

私が取り組んでいるページは次のとおりです。 http://www.morgana.nl/slaaptest/afspraak.html

一番上の画像はdisplay:ブロックに設定した画像で、背景が青色のdivが続きます。

画像へのリンク: http://www.morgana.nl/temp/ie7-display-block.png

有益な助けを期待しています...

4

1 に答える 1

0

XHTML を使用しているため、マークアップをセマンティックにしたいと考えています。技術的/siteimages/forms/bottom.jpgに/siteimages/forms/top.jpgは、人々の写真と比較して、意味のある画像ではありません。これは単なる装飾なので、backgroundCSS プロパティを使用してスタイルを設定し、<div>コンテナーに適用して同じ効果を実現してみませんか?

例えば。

.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-blockIE 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/

于 2013-03-14T18:04:57.220 に答える