1

リストアイテムがインラインで表示されている順序付けされていないリストがあります。ただし、そのレイアウトはかなり複雑なので、フィドルを紹介します。

プロパティを使用して、順序付けされていないリストアイテムが最も高いリストアイテムの高さまで伸びていることに注目してくださいdisplay: table-cell（最初のリストアイテムを除く）。これにより、最初のリストアイテムは、文字「A」が上に垂直に配置された状態で、順序付けされていないリストの高さ全体に垂直線を延長できます。

このプレゼンテーションは、もちろんInternet Explorer 8 [1]を除いて、ほとんどのブラウザでうまく機能します。IE8をお持ちでない場合のスクリーンショットを次に示します。

Chrome（またはIE1-IE8以外の他のブラウザー）で見たものと同じ外観を維持するために私ができることはありますか？

お時間をいただきありがとうございます。

[1]あなたが私たちを嫌っているIE8に対して、私たちはこれまでに何をしましたか？

4

1 に答える 1

2

残念ながら、IEはテーブルセルプロパティをレンダリングしないため、さまざまなハックに頼る必要があります。幸いなことに、これはかなりうまく機能します。

ul li {
    display: inline-block;
    *display:inline;
    zoom: 1;
    height: 100%;
    max-width: 130px;
    min-width: 130px;
    padding: 0px 0px 0px 15px;
    vertical-align: bottom;
}

これにより、IEで要素をインラインブロック方式で整列させ、クロスブラウザーのインライン要素を提供できます。

于 2012-06-29T04:16:12.837 に答える