2

以下のデザインカンプに示すように、Fontawesome シェブロンを使用して背景画像に透明なオーバーレイを作成しようとしています。

ここに画像の説明を入力

3 つの floated をこのように見せるためにあらゆる種類のことを試した後DIV、私は使用することに頼りました

display:table-cell

左右の div には白い背景を使用し、ブロックの中央に山形の DIV を保持します。

これは IE と Chrome では問題なく動作しますが、Firefox ではDIV何らかの理由で中央が押し下げられます。これは、DIV正確に 160 ピクセルの幅を維持する必要があるため、透明なイメージを使用する最終バージョンでは問題になります。WidthでMax-width動作しないようですdisplay: table-cell。

これがjsFiddleです。

質問 1: FF でこの作業を行うにはどうすればよいですか?
質問 2: より良い方法はありますか (4K モニターを説明するのに十分な幅の丸いカットアウトを持つ単一の画像を使用する以外に)

4

1 に答える 1

2

vertical-align: topFF で機能させるには、.whitebox要素に追加するだけです。これはtable-cell要素であるため、プロパティを尊重し、vertical-align期待どおりに整列します。

更新された例

.jumbotaboverlay .whitebox {
    background-color: white;
    border: 1px solid black;
    display: table-cell;
    width: 50%;
    height: 100%;
    vertical-align: top;
}

他の質問に関しては、サポートしようとしているブラウザに完全に依存しています。

于 2014-05-13T18:41:37.593 に答える